/**
 * mobile-menu.css — Mobile menu (.ui-mobile-menu)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, dialog.css, accordion.css
 * @uses       Composes .ui-dialog[data-size="screen"] — fullscreen native <dialog>
 * @uses       Invoker Commands (command="show-modal") — open without JS (markup)
 * @uses       view-transition-name — stable menu across navigations
 * @uses       @starting-style — viewport enter animation
 * @uses       Overrides --ui-dialog-* motion tokens for slide-right variant
 * @tokens     --ui-mobile-menu-* (@layer variables)
 */

@layer variables {
  :root {
    --ui-mobile-menu-background: var(--background);
    --ui-mobile-menu-foreground: var(--foreground);
    --ui-mobile-menu-backdrop-color: var(--faded-foreground);
    --ui-mobile-menu-header-padding-inline: var(--gap-md) var(--gap-xs);
    --ui-mobile-menu-header-padding-block: var(--gap-xs);
    --ui-mobile-menu-body-padding-inline: var(--gap-sm);
    --ui-mobile-menu-body-padding-block: var(--gap-md);
    --ui-mobile-menu-footer-padding: var(--gap-sm);
    --ui-mobile-menu-footer-gap: var(--gap-xs);
    --ui-mobile-menu-nested-accordion-padding-inline-start: var(--gap-sm);

    --ui-mobile-menu-viewport-opacity--start: 0;
    --ui-mobile-menu-viewport-opacity--end: 1;
    --ui-mobile-menu-viewport-scale--start: 0.98;
    --ui-mobile-menu-viewport-scale--end: 1;
    --ui-mobile-menu-viewport-translate--start: -2rem, 1rem, 0;
    --ui-mobile-menu-viewport-translate--end: 0, 0, 0;
  }
}

@layer zazz.components {
  /* ===========================================================================
  MOBILE MENU — full-screen dialog with accordion-based nested navigation
  - Composes .ui-dialog[data-size="screen"] + :where(ui-accordion, .ui-accordion) for expand/collapse
  - No JavaScript — Invoker Commands to open, native dialog close, native details
  =========================================================================== */

  .ui-mobile-menu {
    /* View transitions - keeps the menu stable when navigating between pages */
    view-transition-name: global-mobile-menu;
    inline-size: 100%;

    --ui-dialog-background: var(--ui-mobile-menu-background);
    --ui-dialog-foreground: var(--ui-mobile-menu-foreground);

    overflow: clip;
  }

  .ui-mobile-menu::backdrop {
    background-color: var(--ui-mobile-menu-backdrop-color);
  }

  [data-slot~="mobile-menu-viewport"] {
    display: grid;
    position: relative;
    grid-template-rows: auto 1fr auto;
    overflow: clip;
    align-items: start;
    inline-size: 100%;
    block-size: 100%;
    max-block-size: 100svh;
    transition: var(--default-transition);
    transition-duration: var(--ui-dialog-transition-duration);
    transition-delay: calc(var(--ui-dialog-transition-duration) / 1.5);
  }

  .ui-mobile-menu[data-animation="slide-right"][open] [data-slot~="mobile-menu-viewport"] {
    opacity: var(--ui-mobile-menu-viewport-opacity--end);
    transform: scale(var(--ui-mobile-menu-viewport-scale--end))
      translate3d(var(--ui-mobile-menu-viewport-translate--end));

    @starting-style {
      opacity: var(--ui-mobile-menu-viewport-opacity--start);
      transform: scale(var(--ui-mobile-menu-viewport-scale--start))
        translate3d(var(--ui-mobile-menu-viewport-translate--start));
    }
  }

  [data-slot~="mobile-menu-header"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--ui-mobile-menu-header-padding-inline);
    padding-block: var(--ui-mobile-menu-header-padding-block);
    border-block-end: 1px solid var(--border);
    position: sticky;
    inset-block-start: 0;
    background-color: var(--ui-mobile-menu-background);
    z-index: 1;
  }

  [data-slot~="mobile-menu-body"] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: clip;
    padding-inline: var(--ui-mobile-menu-body-padding-inline);
    padding-block: var(--ui-mobile-menu-body-padding-block);
    max-block-size: 100%;
    scrollbar-gutter: stable both-edges;
  }

  [data-slot~="mobile-menu-footer"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-mobile-menu-footer-gap);
    padding: var(--ui-mobile-menu-footer-padding);
    border-block-start: 1px solid var(--border);
    position: sticky;
    inset-block-end: 0;
    background-color: var(--ui-mobile-menu-background);
  }

  /* Nested accordion inside mobile menu — tighter padding for sub-levels */
  [data-slot~="mobile-menu-body"]
    :where(ui-accordion, .ui-accordion)
    :where(ui-accordion, .ui-accordion) {
    padding-inline-start: var(--ui-mobile-menu-nested-accordion-padding-inline-start);
  }

  [data-slot~="mobile-menu-body"] :where(ui-accordion, .ui-accordion) details:not(:last-child) {
    border-bottom-color: var(--border);
  }

  /* ===========================================================================
  MOBILE MENU SLIDE DOWN ANIMATION
  =========================================================================== */

  /* Slide-right: accordion-style block-size reveal on the viewport (not scaleY). */
  .ui-mobile-menu[data-animation="slide-right"] {
    --ui-dialog-transition-duration: calc(var(--default-transition-duration) * 1.75);
    --ui-dialog-opacity--start: 1;
    --ui-dialog-scale--start: 1;
    --ui-dialog-translate--start: -100%, 0, 0;
    --ui-dialog-translate--end: 0, 0, 0;

    overflow: clip;
    transform-origin: left center;
  }
}