.my-menu__item[aria-disabled="true"],
.my-menu__item:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.my-menu__item-main,
.my-menu__item-meta {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  position: relative;
  z-index: 1;
}

.my-menu__item-main {
  gap: var(--my-menu-submenu-item-gap);
}

.my-menu__item-meta {
  flex: 0 0 auto;
  gap: 0.44rem;
  color: var(--my-menu-muted);
  font-size: 0.88em;
}

.my-menu__icon,
.my-menu__submenu-intro {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  place-items: center;
  color: currentColor;
  font-size: 0.82em;
}

.my-menu__icon--image,
.my-menu__submenu-intro--image,
.my-menu__indicator--image {
  background: currentColor;
  font-size: 1em;
  -webkit-mask: var(--my-menu-icon-image) center / contain no-repeat;
  mask: var(--my-menu-icon-image) center / contain no-repeat;
}

.my-menu__label {
  display: inline-grid;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  grid-template-areas: "label";
  justify-items: center;
  line-height: var(--my-menu-line-height);
  white-space: nowrap;
}

.my-menu__label-text,
.my-menu__label[data-my-menu-label]::before,
.my-menu__label[data-my-menu-label]::after {
  grid-area: label;
  max-width: 100%;
  min-width: 0;
}

.my-menu__label-text {
  position: relative;
  justify-self: center;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-menu__label-text::after {
  position: absolute;
  right: 0;
  bottom: calc(0px - var(--my-menu-label-underline-offset, 4px) - var(--my-menu-label-underline-thickness, 2px));
  left: 0;
  height: var(--my-menu-label-underline-thickness, 2px);
  border-radius: var(--my-menu-label-underline-radius, 0px);
  background: var(--my-menu-label-underline-color, currentColor);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.36);
  transform-origin: center;
  transition: opacity var(--my-menu-duration) var(--my-menu-easing), transform var(--my-menu-duration) var(--my-menu-easing);
}

.my-menu__label[data-my-menu-label]::before,
.my-menu__label[data-my-menu-label]::after {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  content: attr(data-my-menu-label);
}

.my-menu__label[data-my-menu-label]::before {
  font-weight: var(--my-menu-label-reserved-hover-font-weight, var(--my-menu-font-weight));
}

.my-menu__label[data-my-menu-label]::after {
  font-weight: var(--my-menu-label-reserved-active-font-weight, var(--my-menu-font-weight));
}

.my-menu__meta-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-menu__badge {
  padding: 0.12rem 0.36rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--my-menu-active-effect-color), #ffffff 86%);
  color: color-mix(in srgb, var(--my-menu-active-effect-color), #000000 22%);
  font-size: 0.76em;
  font-weight: 900;
}

.my-menu__indicator {
  position: relative;
  display: inline-grid;
  width: var(--my-menu-indicator-size);
  height: var(--my-menu-indicator-size);
  flex: 0 0 var(--my-menu-indicator-size);
  place-items: center;
  color: var(--my-menu-submenu-indicator-color);
}

.my-menu[data-my-menu-layout="mobile"] [data-my-menu-submenu-trigger] .my-menu__item-meta {
  color: inherit;
}

.my-menu[data-my-menu-layout="mobile"] [data-my-menu-submenu-trigger].my-menu__item--indicator-end .my-menu__item-meta {
  margin-inline-start: auto;
  padding-inline-start: var(--my-menu-mobile-submenu-meta-padding-inline-start);
}

.my-menu[data-my-menu-layout="mobile"] [data-my-menu-submenu-trigger] .my-menu__indicator {
  color: var(--my-menu-mobile-submenu-indicator-color);
}

.my-menu[data-my-menu-layout="desktop"]:is(.my-menu--submenu-indicator-frame-square, .my-menu--submenu-indicator-frame-circle) [data-my-menu-submenu-trigger] .my-menu__indicator:is(.my-menu__indicator--chevron, .my-menu__indicator--arrow, .my-menu__indicator--plus) {
  box-sizing: border-box;
  width: var(--my-menu-submenu-indicator-frame-size);
  height: var(--my-menu-submenu-indicator-frame-size);
  inline-size: var(--my-menu-submenu-indicator-frame-size);
  block-size: var(--my-menu-submenu-indicator-frame-size);
  min-inline-size: var(--my-menu-submenu-indicator-frame-size);
  max-inline-size: var(--my-menu-submenu-indicator-frame-size);
  min-block-size: var(--my-menu-submenu-indicator-frame-size);
  max-block-size: var(--my-menu-submenu-indicator-frame-size);
  flex: 0 0 var(--my-menu-submenu-indicator-frame-size);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border: var(--my-menu-submenu-indicator-frame-border-width) solid var(--my-menu-submenu-indicator-frame-border);
  border-radius: var(--my-menu-submenu-indicator-frame-radius);
  background: var(--my-menu-submenu-indicator-frame-bg);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--submenu-indicator-frame-circle [data-my-menu-submenu-trigger] .my-menu__indicator:is(.my-menu__indicator--chevron, .my-menu__indicator--arrow, .my-menu__indicator--plus) {
  border-radius: 50%;
}

.my-menu[data-my-menu-layout="mobile"]:is(.my-menu--mobile-submenu-indicator-frame-square, .my-menu--mobile-submenu-indicator-frame-circle) [data-my-menu-submenu-trigger] .my-menu__indicator:is(.my-menu__indicator--chevron, .my-menu__indicator--arrow, .my-menu__indicator--plus) {
  box-sizing: border-box;
  width: var(--my-menu-mobile-submenu-indicator-frame-size);
  height: var(--my-menu-mobile-submenu-indicator-frame-size);
  inline-size: var(--my-menu-mobile-submenu-indicator-frame-size);
  block-size: var(--my-menu-mobile-submenu-indicator-frame-size);
  min-inline-size: var(--my-menu-mobile-submenu-indicator-frame-size);
  max-inline-size: var(--my-menu-mobile-submenu-indicator-frame-size);
  min-block-size: var(--my-menu-mobile-submenu-indicator-frame-size);
  max-block-size: var(--my-menu-mobile-submenu-indicator-frame-size);
  flex: 0 0 var(--my-menu-mobile-submenu-indicator-frame-size);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border: var(--my-menu-mobile-submenu-indicator-frame-border-width) solid var(--my-menu-mobile-submenu-indicator-frame-border);
  border-radius: var(--my-menu-mobile-submenu-indicator-frame-radius);
  background: var(--my-menu-mobile-submenu-indicator-frame-bg);
  line-height: 1;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-submenu-indicator-frame-circle [data-my-menu-submenu-trigger] .my-menu__indicator:is(.my-menu__indicator--chevron, .my-menu__indicator--arrow, .my-menu__indicator--plus) {
  border-radius: 50%;
}

.my-menu__indicator--chevron::before {
  position: absolute;
  inset: 20%;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.my-menu__submenu .my-menu__indicator--chevron::before {
  transform: rotate(-45deg);
}

.my-menu__indicator--arrow::before,
.my-menu__indicator--arrow::after {
  position: absolute;
  content: "";
}

.my-menu__indicator--arrow::before {
  top: 18%;
  bottom: 18%;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}

.my-menu__indicator--arrow::after {
  bottom: 18%;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

.my-menu__submenu .my-menu__indicator--arrow::before {
  top: 50%;
  right: 18%;
  bottom: auto;
  left: 18%;
  width: auto;
  height: 2px;
  transform: translateY(-50%);
}

.my-menu__submenu .my-menu__indicator--arrow::after {
  top: 50%;
  right: 18%;
  bottom: auto;
  left: auto;
  transform: translateY(-50%) rotate(-45deg);
}
.my-menu[data-my-menu-layout="mobile"] [data-my-menu-submenu-trigger] .my-menu__indicator:is(.my-menu__indicator--arrow, .my-menu__indicator--plus)::before {
  display: none;
}

.my-menu[data-my-menu-layout="mobile"] [data-my-menu-submenu-trigger] .my-menu__indicator:is(.my-menu__indicator--chevron, .my-menu__indicator--arrow, .my-menu__indicator--plus)::after,
.my-menu[data-my-menu-layout="mobile"] [data-my-menu-submenu-trigger] .my-menu__indicator--chevron::before {
  inset: 33%;
  width: auto;
  height: auto;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: transparent;
  transform: translateX(var(--my-menu-mobile-submenu-chevron-optical-offset)) rotate(-45deg);
}
.my-menu__indicator--plus::before,
.my-menu__indicator--plus::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0.72rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

.my-menu__indicator--plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.my-menu[data-my-menu-layout="mobile"] [data-my-menu-submenu-trigger] .my-menu__indicator--plus::after {
  position: absolute;
  inset: 33%;
  width: auto;
  height: auto;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  content: "";
  transform: rotate(-45deg);
}

.my-menu__submenu-intro--dot::before {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.72;
}

.my-menu__divider {
  display: block;
  height: 1px;
  margin: 0.28rem 0.4rem;
  background: var(--my-menu-border);
}

.my-menu__section-label {
  display: block;
  padding: 0.46rem 0.8rem 0.22rem;
  color: var(--my-menu-muted);
  font-size: 0.74em;
  font-weight: 900;
  text-transform: uppercase;
}