/* The anchored panel, and the modal sheet it becomes on a narrow viewport. `data-sheet` is read off the
   viewport once, since the modal flag is a Base UI prop no media query sets. The overlay rung sits on the
   positioner, the element the portal places (§2.3). `--lotics-popover-inset` is shared by the panel, the
   footer's bleed and the scroll body's bleed, which must agree. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

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

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

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

  /* A closing scrim is not a target (`css_contract.test.ts` § a closing scrim). */
  .lotics-popover__backdrop[data-ending-style] {
    pointer-events: none;
  }

  .lotics-popover__popup {
    --lotics-popover-inset: var(--lotics-space-12);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: var(--lotics-popover-width, max-content);
    max-width: min(800px, var(--available-width, 800px));
    max-height: 80vh;
    padding: var(--lotics-popover-inset);
    border: 0 solid transparent;
    border-radius: var(--lotics-radius-card);
    background-color: var(--popover);
    /* A sticky register head here paints this surface's ground. */
    --lotics-register-ground: var(--popover);
    /* The surface's ink pair (`card.css`). */
    color: var(--popover-foreground);
    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),
      transform var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-popover__popup:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

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

  /* The width itself, not a floor: long option text wraps rather than widening the panel. Floored so a
     dense grid column still opens a readable list. */
  .lotics-popover__popup[data-inherit] {
    width: max(var(--anchor-width), var(--lotics-control-min-width));
    max-width: max(var(--anchor-width), var(--lotics-control-min-width));
  }

  /* ─── The bands ───────────────────────────────────────────────────────── */

  .lotics-popover__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: var(--lotics-space-8);
  }

  /* Full-bleed, then re-inset: a scroller inside the padding clips short of the edge and parks its
     scrollbar there. */
  .lotics-popover__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    max-height: var(--lotics-popover-body-max-height, none);
    margin-inline: calc(-1 * var(--lotics-popover-inset));
  }

  .lotics-popover__body[data-scroll] {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* `maxHeight` sizes the panel's middle and this box is all that stands between it and the children;
     `align-items: stretch` covers only the cross axis. */
  .lotics-popover__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-grow: 1;
    min-width: 0;
    padding-inline: var(--lotics-popover-inset);
  }

  .lotics-popover__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-inline: calc(-1 * var(--lotics-popover-inset));
    margin-top: var(--lotics-popover-inset);
  }

  .lotics-popover__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
    padding-inline: var(--lotics-popover-inset);
    padding-top: var(--lotics-popover-inset);
    justify-content: flex-end;
  }

  .lotics-popover__actions[data-align="start"] {
    justify-content: flex-start;
  }

  .lotics-popover__actions[data-align="space-between"] {
    justify-content: space-between;
  }

  .lotics-popover__close {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: var(--lotics-space-8);
  }

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

  /* Cancelling Floating UI's placement leaves the positioner spanning the viewport above the scrim, so it
     passes presses through and the popup takes its own back. */
  .lotics-popover__positioner[data-sheet] {
    pointer-events: none;
  }

  .lotics-popover__popup[data-sheet] {
    pointer-events: auto;
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-width: none;
    max-height: 90vh;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-bottom: var(--lotics-space-32);
    transform: translateY(0);
  }

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