/*
 * THE ⋯ OVERFLOW MENU. Base UI's Menu, so the container is a real `menu`, the
 * rows are its `menuitem`s, and the arrow keys, the typeahead, Escape and the
 * focus return are the library's.
 *
 * The panel is stated here rather than borrowed from `popover.css`. A component's
 * CSS may not target another component's class (§5 rule 10) — a
 * `.lotics-popover__popup` rule reached from here would restyle every popover a
 * consumer owns and could not be beaten without matching our specificity — and
 * the kit ships no shared utility class to put it in. So the menu's panel is the
 * menu's, on the same tokens as the popover's: one theme moves both.
 *
 * `data-sheet` is the one switch, read once from the VIEWPORT, for the reason
 * `popover.css` gives: `modal` is a Base UI Root prop that no media query can
 * set. The press-through pair on the sheet is that file's too, and it is what
 * lets the scrim be pressed.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-action-menu__positioner {
    z-index: var(--lotics-z-overlay);
  }

  .lotics-action-menu__backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--lotics-scrim-strong);
    opacity: 1;
    transition: opacity var(--lotics-duration-base) var(--lotics-ease-standard);
  }

  .lotics-action-menu__backdrop[data-starting-style],
  .lotics-action-menu__backdrop[data-ending-style] {
    opacity: 0;
  }

  /* A scrim on its way out is not a target — `css_contract.test.ts` § a closing
     scrim, which is where the reason is. */
  .lotics-action-menu__backdrop[data-ending-style] {
    pointer-events: none;
  }

  .lotics-action-menu__popup {
    --lotics-action-menu-inset: var(--lotics-space-12);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    /* The floor is on the ROWS, which is where it reads — the panel adds its own
       inset on each side, as it did when this menu was a popover holding a
       200px-wide body. */
    min-width: calc(200px + 2 * var(--lotics-action-menu-inset));
    max-height: 80vh;
    overflow-y: auto;
    /* The rows are one step apart, not a rung apart: a menu is one object and a
       spacing rung between its lines would read as groups. */
    gap: var(--lotics-space-2);
    padding: var(--lotics-action-menu-inset);
    border: 0 solid transparent;
    border-radius: var(--lotics-radius-card);
    background-color: var(--popover);
    color: var(--lotics-ink-default);
    box-shadow: var(--lotics-shadow-raised);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-md);
    line-height: var(--lotics-leading-md);
    letter-spacing: var(--lotics-tracking-md);
    outline: none;
    transition: opacity var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-action-menu__popup[data-starting-style],
  .lotics-action-menu__popup[data-ending-style] {
    opacity: 0;
  }

  /* ─── The sheet ───────────────────────────────────────────────────────── */

  .lotics-action-menu__positioner[data-sheet] {
    pointer-events: none;
  }

  .lotics-action-menu__popup[data-sheet] {
    pointer-events: auto;
    position: fixed;
    inset: auto 0 0 0;
    min-width: 0;
    max-height: 90vh;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-bottom: var(--lotics-space-32);
    transform: translateY(0);
    transition:
      opacity var(--lotics-duration-fast) var(--lotics-ease-standard),
      transform var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-action-menu__popup[data-sheet][data-starting-style],
  .lotics-action-menu__popup[data-sheet][data-ending-style] {
    opacity: 1;
    transform: translateY(100%);
  }
}