.my-menu[data-my-menu-layout="mobile"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: stretch;
  color: var(--my-menu-mobile-text);
  font-size: var(--my-menu-mobile-font-size);
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__toggle {
  display: inline-flex;
  grid-column: 1;
  transition:
    background var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing),
    color var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing),
    box-shadow var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing);
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__toggle-icon-bar {
  transition:
    opacity var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing),
    transform var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--hamburger-end .my-menu__toggle {
  justify-self: end;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--hamburger-start .my-menu__toggle {
  justify-self: start;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--hamburger-center .my-menu__toggle {
  justify-self: center;
}

.my-menu__backdrop {
  display: none;
}

.my-menu__drawer-header {
  display: none;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--my-menu-z-index);
  display: block;
  background: var(--my-menu-mobile-backdrop-bg);
  opacity: 0;
  pointer-events: auto;
  touch-action: none;
  visibility: hidden;
  transition:
    opacity var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing),
    visibility 0s linear var(--my-menu-mobile-panel-duration);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--open .my-menu__backdrop {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__toggle {
  z-index: calc(var(--my-menu-z-index) + 2);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer .my-menu__drawer-header {
  display: flex;
  min-width: 0;
  min-height: calc(
    var(--my-menu-toggle-size)
    + var(--my-menu-toggle-ring-width)
    + var(--my-menu-toggle-ring-width)
    + env(safe-area-inset-top, 0px)
    + 0.55rem
  );
  flex: 0 0 auto;
  align-items: flex-start;
  padding-block-start: env(safe-area-inset-top, 0px);
  padding-block-end: 0.55rem;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer.my-menu--hamburger-end .my-menu__drawer-header {
  justify-content: flex-end;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer.my-menu--hamburger-start .my-menu__drawer-header {
  justify-content: flex-start;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer.my-menu--hamburger-center .my-menu__drawer-header {
  justify-content: center;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer .my-menu__drawer-close {
  position: relative;
  z-index: 1;
  display: inline-flex;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer.my-menu--open > .my-menu__toggle {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  display: flex;
  min-height: 0;
  flex-direction: column;
  width: min(
    var(--my-menu-mobile-panel-width),
    calc(100vw - 1rem)
  );
  max-width: calc(100vw - 1rem);
  max-height: none;
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0.55rem;
  border: 0 solid transparent;
  border-radius: var(--my-menu-mobile-panel-radius);
  outline: var(--my-menu-mobile-panel-border-width) solid var(--my-menu-mobile-panel-border);
  outline-offset: 0;
  color: var(--my-menu-mobile-panel-text);
  background: var(--my-menu-mobile-panel-bg);
  background-clip: padding-box;
  box-shadow: var(--my-menu-mobile-panel-shadow);
  z-index: calc(var(--my-menu-z-index) + 1);
  overscroll-behavior: contain;
  transition: transform var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer .my-menu__panel {
  top: var(--my-menu-mobile-drawer-top-offset);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer .my-menu__panel > .my-menu__list {
  margin-block-start: max(0px, var(--my-menu-mobile-drawer-content-offset));
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer .my-menu__panel::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: max(0px, var(--my-menu-mobile-drawer-border-width));
  background: var(--my-menu-mobile-drawer-border-color);
  opacity: var(--my-menu-mobile-drawer-border-opacity);
  pointer-events: none;
  content: "";
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer .my-menu__panel::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: max(0px, var(--my-menu-mobile-drawer-border-width));
  inset-inline-end: 0;
  z-index: 1;
  height: max(0px, var(--my-menu-mobile-drawer-top-border-width));
  background: var(--my-menu-mobile-drawer-top-border-color);
  opacity: var(--my-menu-mobile-drawer-top-border-opacity);
  pointer-events: none;
  content: "";
}

/* The side edge owns the shared corner, avoiding doubled opacity. */
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer.my-menu--mobile-side-start .my-menu__panel::after {
  inset-inline-start: 0;
  inset-inline-end: max(0px, var(--my-menu-mobile-drawer-border-width));
}

/* The caller supplies a sized layout region; no viewport/trigger measurements. */
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-contained-drawer {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-contained-drawer .my-menu__drawer-region {
  position: absolute;
  inset: var(--my-menu-mobile-drawer-top-offset) 0 0;
  overflow: hidden;
  z-index: calc(var(--my-menu-z-index) + 1);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-contained-drawer .my-menu__panel {
  position: absolute;
  top: 0;
  width: min(var(--my-menu-mobile-panel-width), 100%);
  max-width: 100%;
  padding-block-end: max(0.55rem, env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-contained-drawer[data-my-menu-phase="closed"] {
  visibility: hidden;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer.my-menu--mobile-side-start .my-menu__panel::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer[data-my-menu-phase="opening"] .my-menu__panel,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer[data-my-menu-phase="closing"] .my-menu__panel {
  will-change: transform;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-side-start .my-menu__panel {
  inset-inline-start: 0;
  inset-inline-end: auto;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-side-end .my-menu__panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__panel > .my-menu__list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-drawer.my-menu--mobile-back-after-items .my-menu__panel > .my-menu__list {
  flex-grow: 0;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--open .my-menu__panel {
  transform: translate3d(0, 0, 0);
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__panel[data-my-menu-panel-state="closed"] {
  pointer-events: none;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-side-start .my-menu__panel[data-my-menu-panel-state="closed"] {
  transform: translate3d(calc(-100% - 1rem), 0, 0);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-side-end .my-menu__panel[data-my-menu-panel-state="closed"] {
  transform: translate3d(calc(100% + 1rem), 0, 0);
}

.my-menu:dir(rtl)[data-my-menu-layout="mobile"].my-menu--mobile-side-start .my-menu__panel[data-my-menu-panel-state="closed"] {
  transform: translate3d(calc(100% + 1rem), 0, 0);
}

.my-menu:dir(rtl)[data-my-menu-layout="mobile"].my-menu--mobile-side-end .my-menu__panel[data-my-menu-panel-state="closed"] {
  transform: translate3d(calc(-100% - 1rem), 0, 0);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-dropdown .my-menu__panel {
  position: absolute;
  top: calc(100% + 0.72rem);
  right: auto;
  bottom: auto;
  left: 50%;
  display: grid;
  width: min(
    var(--my-menu-mobile-panel-width),
    calc(100vw - 1rem)
  );
  max-width: calc(100vw - 1rem);
  max-height: none;
  height: auto;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: auto;
  opacity: 1;
  transform: translateX(-50%);
  visibility: visible;
  transition:
    opacity var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing),
    visibility 0s linear 0s;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-dropdown .my-menu__panel > .my-menu__list {
  min-height: 0;
  flex: 0 1 auto;
  overflow: hidden;
  overscroll-behavior: auto;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-dropdown .my-menu__panel[data-my-menu-panel-state="closed"] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  visibility: hidden;
  transition:
    opacity var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing),
    visibility 0s linear var(--my-menu-mobile-panel-duration);
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-dropdown.my-menu--open .my-menu__panel {
  opacity: 1;
  transform: translateX(-50%);
  visibility: visible;
  transition-delay: 0s;
}

.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-dropdown[data-my-menu-phase="opening"] .my-menu__panel,
.my-menu[data-my-menu-layout="mobile"].my-menu--mobile-dropdown[data-my-menu-phase="closing"] .my-menu__panel {
  will-change: opacity;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__panel[data-my-menu-level-motion="forward"] > .my-menu__list,
.my-menu[data-my-menu-layout="mobile"] .my-menu__panel[data-my-menu-level-motion="forward"] > .my-menu__mobile-level {
  animation: my-menu-mobile-level-forward var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing) backwards;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__panel[data-my-menu-level-motion="backward"] > .my-menu__list,
.my-menu[data-my-menu-layout="mobile"] .my-menu__panel[data-my-menu-level-motion="backward"] > .my-menu__mobile-level {
  animation: my-menu-mobile-level-backward var(--my-menu-mobile-panel-duration) var(--my-menu-mobile-panel-easing) backwards;
}

@keyframes my-menu-mobile-level-forward {
  from {
    opacity: 0.64;
    transform: translate3d(0.72rem, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes my-menu-mobile-level-backward {
  from {
    opacity: 0.64;
    transform: translate3d(-0.72rem, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__list {
  display: grid;
  align-content: start;
  align-items: stretch;
  gap: var(--my-menu-mobile-item-gap);
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__item {
  --my-menu-item-effect-padding-x: max(var(--my-menu-item-padding-x), var(--my-menu-mobile-item-min-padding-x));
  width: 100%;
  padding-inline: var(--my-menu-item-effect-padding-x);
}

.my-menu[data-my-menu-layout="mobile"] [data-my-menu-submenu-trigger] {
  padding-inline-end: var(--my-menu-mobile-submenu-trigger-padding-inline-end, var(--my-menu-item-effect-padding-x));
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__item-main {
  flex: 1 1 auto;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__label {
  justify-items: start;
  text-align: left;
  white-space: normal;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__label-text {
  justify-self: start;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__mobile-level {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0.62rem;
  margin: max(0px, var(--my-menu-mobile-back-gap)) 0 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__mobile-back {
  pointer-events: auto;
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__mobile-back-icon {
  width: 0.46rem;
  height: 0.46rem;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.my-menu[data-my-menu-layout="mobile"] .my-menu__mobile-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  color: var(--my-menu-mobile-panel-text);
  white-space: nowrap;
}