.my-menu__item {
  --my-menu-item-effect-padding-x: var(--my-menu-item-padding-x);
  --my-menu-item-effect-padding-y: var(--my-menu-item-padding-y);
  position: relative;
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.62rem;
  padding: var(--my-menu-item-padding-y) var(--my-menu-item-padding-x);
  border: 0;
  border-radius: var(--my-menu-item-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: var(--my-menu-font-weight);
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  z-index: 0;
  transition:
    background var(--my-menu-duration) var(--my-menu-easing),
    box-shadow var(--my-menu-duration) var(--my-menu-easing),
    color var(--my-menu-duration) var(--my-menu-easing);
}

.my-menu__item::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: var(--my-menu-effect-radius, 0px);
  background: transparent;
  box-shadow: none;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition:
    box-shadow var(--my-menu-duration) var(--my-menu-easing),
    opacity var(--my-menu-duration) var(--my-menu-easing),
    inset 0s linear var(--my-menu-duration);
}

.my-menu__item:is(
  .my-menu__item--current,
  :hover,
  :focus-visible,
  [aria-expanded="true"]
)::before {
  transition-delay: 0s;
}

.my-menu__item:not(.my-menu__item--current):hover,
.my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] {
  outline: none;
}

.my-menu__item--current {
  color: var(--my-menu-active-text);
}

.my-menu__item:not(.my-menu__item--current):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--my-menu-hover-effect-color), #ffffff 18%);
  outline-offset: 2px;
}

.my-menu__item--current:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--my-menu-active-effect-color), #ffffff 18%);
  outline-offset: 2px;
}

.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-bold {
  --my-menu-label-reserved-hover-font-weight: var(--my-menu-hover-font-weight);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-bold {
  --my-menu-label-reserved-active-font-weight: var(--my-menu-active-font-weight);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-bold {
  --my-menu-label-reserved-hover-font-weight: var(--my-menu-mobile-hover-font-weight);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-active-effect-bold {
  --my-menu-label-reserved-active-font-weight: var(--my-menu-mobile-active-font-weight);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-highlight .my-menu__item:not(.my-menu__item--current):hover,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-highlight .my-menu__item:not(.my-menu__item--current):focus-visible,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-highlight .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] {
  --my-menu-effect-radius: var(--my-menu-hover-effect-radius);
  background: transparent;
  color: var(--my-menu-hover-text);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-highlight .my-menu__item:not(.my-menu__item--current):hover::before,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-highlight .my-menu__item:not(.my-menu__item--current):focus-visible::before,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-highlight .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"]::before {
  inset: calc(var(--my-menu-item-effect-padding-y) - var(--my-menu-hover-effect-distance)) calc(var(--my-menu-item-effect-padding-x) - var(--my-menu-hover-effect-distance));
  background: var(--my-menu-hover-bg);
  box-shadow: 0 0 0 var(--my-menu-hover-effect-thickness) var(--my-menu-hover-effect-color);
  opacity: 1;
}

.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current):hover,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current):focus-visible,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] {
  --my-menu-effect-radius: var(--my-menu-hover-effect-radius);
  color: var(--my-menu-hover-text);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current):hover .my-menu__label-text,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current):focus-visible .my-menu__label-text,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] .my-menu__label-text {
  --my-menu-label-underline-color: var(--my-menu-hover-effect-color);
  --my-menu-label-underline-offset: var(--my-menu-hover-effect-distance);
  --my-menu-label-underline-radius: var(--my-menu-hover-effect-radius);
  --my-menu-label-underline-thickness: var(--my-menu-hover-effect-thickness);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current):hover .my-menu__label-text::after,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current):focus-visible .my-menu__label-text::after,
.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-underline .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] .my-menu__label-text::after {
  opacity: 1;
  transform: scaleX(1);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-bold .my-menu__item:not(.my-menu__item--current):is(:hover, :focus-visible, [aria-expanded="true"]) {
  color: var(--my-menu-hover-text);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--hover-effect-bold .my-menu__item:not(.my-menu__item--current):is(:hover, :focus-visible, [aria-expanded="true"]) .my-menu__label {
  font-weight: var(--my-menu-hover-font-weight);
}
.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-highlight .my-menu__item--current {
  --my-menu-effect-radius: var(--my-menu-active-effect-radius);
  background: transparent;
}

.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-highlight .my-menu__item--current::before {
  inset: calc(var(--my-menu-item-effect-padding-y) - var(--my-menu-active-effect-distance)) calc(var(--my-menu-item-effect-padding-x) - var(--my-menu-active-effect-distance));
  background: var(--my-menu-active-bg);
  box-shadow: 0 0 0 var(--my-menu-active-effect-thickness) var(--my-menu-active-effect-color);
  opacity: 1;
}

.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-underline .my-menu__item--current,
.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-none .my-menu__item--current {
  --my-menu-effect-radius: var(--my-menu-active-effect-radius);
  background: transparent;
}

.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-underline .my-menu__item--current .my-menu__label-text {
  --my-menu-label-underline-color: var(--my-menu-active-effect-color);
  --my-menu-label-underline-offset: var(--my-menu-active-effect-distance);
  --my-menu-label-underline-radius: var(--my-menu-active-effect-radius);
  --my-menu-label-underline-thickness: var(--my-menu-active-effect-thickness);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-underline .my-menu__item--current .my-menu__label-text::after {
  opacity: 1;
  transform: scaleX(1);
}

.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-bold .my-menu__item--current {
  background: transparent;
}

.my-menu[data-my-menu-layout="desktop"].my-menu--active-effect-bold .my-menu__item--current .my-menu__label {
  font-weight: var(--my-menu-active-font-weight);
}
.my-menu[data-my-menu-layout="mobile"] .my-menu__item--current {
  color: var(--my-menu-mobile-active-text);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-highlight .my-menu__item:not(.my-menu__item--current):hover,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-highlight .my-menu__item:not(.my-menu__item--current):focus-visible,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-highlight .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] {
  --my-menu-effect-radius: var(--my-menu-mobile-hover-effect-radius, var(--my-menu-hover-effect-radius));
  background: transparent;
  color: var(--my-menu-mobile-hover-text);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-highlight .my-menu__item:not(.my-menu__item--current):hover::before,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-highlight .my-menu__item:not(.my-menu__item--current):focus-visible::before,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-highlight .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"]::before {
  inset: calc(var(--my-menu-item-effect-padding-y) - var(--my-menu-mobile-hover-effect-distance)) calc(var(--my-menu-item-effect-padding-x) - var(--my-menu-mobile-hover-effect-distance));
  background: var(--my-menu-mobile-hover-bg);
  box-shadow: 0 0 0 var(--my-menu-mobile-hover-effect-thickness) var(--my-menu-mobile-hover-effect-color);
  opacity: 1;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current):hover,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current):focus-visible,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] {
  --my-menu-effect-radius: var(--my-menu-mobile-hover-effect-radius, var(--my-menu-hover-effect-radius));
  background: transparent;
  color: var(--my-menu-mobile-hover-text);
  box-shadow: none;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current):hover .my-menu__label-text,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current):focus-visible .my-menu__label-text,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] .my-menu__label-text {
  --my-menu-label-underline-color: var(--my-menu-mobile-hover-effect-color);
  --my-menu-label-underline-offset: var(--my-menu-mobile-hover-effect-distance);
  --my-menu-label-underline-radius: var(--my-menu-mobile-hover-effect-radius, var(--my-menu-hover-effect-radius));
  --my-menu-label-underline-thickness: var(--my-menu-mobile-hover-effect-thickness);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current):hover .my-menu__label-text::after,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current):focus-visible .my-menu__label-text::after,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-underline .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] .my-menu__label-text::after {
  opacity: 1;
  transform: scaleX(1);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-none .my-menu__item:not(.my-menu__item--current):hover,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-none .my-menu__item:not(.my-menu__item--current):focus-visible,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-none .my-menu__item:not(.my-menu__item--current)[aria-expanded="true"] {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-bold .my-menu__item:not(.my-menu__item--current):is(:hover, :focus-visible, [aria-expanded="true"]) {
  color: var(--my-menu-mobile-hover-text);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-hover-effect-bold .my-menu__item:not(.my-menu__item--current):is(:hover, :focus-visible, [aria-expanded="true"]) .my-menu__label {
  font-weight: var(--my-menu-mobile-hover-font-weight);
}
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-active-effect-highlight .my-menu__item--current {
  --my-menu-effect-radius: var(--my-menu-mobile-active-effect-radius, var(--my-menu-active-effect-radius));
  background: transparent;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-active-effect-highlight .my-menu__item--current::before {
  inset-block: var(--my-menu-mobile-active-effect-inset-block, calc(var(--my-menu-item-effect-padding-y) - var(--my-menu-mobile-active-effect-distance)));
  inset-inline-end: var(--my-menu-mobile-active-effect-inset-inline-end, calc(var(--my-menu-item-effect-padding-x) - var(--my-menu-mobile-active-effect-distance)));
  inset-inline-start: calc(var(--my-menu-mobile-active-effect-inset-inline-start, calc(var(--my-menu-item-effect-padding-x) - var(--my-menu-mobile-active-effect-distance))) - var(--my-menu-mobile-active-effect-leading-space));
  background: var(--my-menu-mobile-active-bg);
  box-shadow: 0 0 0 var(--my-menu-mobile-active-effect-thickness) var(--my-menu-mobile-active-effect-color);
  opacity: 1;
}

.my-menu[data-my-menu-layout="mobile"]:is(.my-menu--mobile-active-effect-underline, .my-menu--mobile-active-effect-none) .my-menu__item--current {
  --my-menu-effect-radius: var(--my-menu-mobile-active-effect-radius, var(--my-menu-active-effect-radius));
  background: transparent;
  box-shadow: none;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-active-effect-underline .my-menu__item--current .my-menu__label-text {
  --my-menu-label-underline-color: var(--my-menu-mobile-active-effect-color);
  --my-menu-label-underline-offset: var(--my-menu-mobile-active-effect-distance);
  --my-menu-label-underline-radius: var(--my-menu-mobile-active-effect-radius, var(--my-menu-active-effect-radius));
  --my-menu-label-underline-thickness: var(--my-menu-mobile-active-effect-thickness);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-active-effect-underline .my-menu__item--current .my-menu__label-text::after {
  opacity: 1;
  transform: scaleX(1);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-active-effect-bold .my-menu__item--current {
  background: transparent;
  box-shadow: none;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-active-effect-bold .my-menu__item--current .my-menu__label {
  font-weight: var(--my-menu-mobile-active-font-weight);
}