/*
 * THE CENTRED CARD OVER A SCRIM. Below the shared 768px rung it is a bottom sheet
 * (`overlay_sheet.ts`), read from the screen it covers: the window, or the `SizeBoundary` of the screen
 * whose host it portals to — a container query on an undeclared name is false, so `@media` answers
 * where there is none and the `@container` pair overrides it. The sheet is as tall as its content, up
 * to the screen.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-dialog__backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--lotics-scrim);
    backdrop-filter: blur(3px);
    z-index: var(--lotics-z-overlay);
  }

  /*
   * The card's `%` measurements resolve against the viewport; the sheet rises from the bottom,
   * where a thumb reaches.
   */
  .lotics-dialog__viewport {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    z-index: var(--lotics-z-overlay);
  }

  @media (width < 768px) {
    .lotics-dialog__viewport {
      align-items: flex-end;
    }
  }

  @media (width >= 768px) {
    .lotics-dialog__viewport {
      align-items: flex-start;
    }
  }

  @container lotics-boundary (width >= 768px) {
    .lotics-dialog__viewport {
      align-items: flex-start;
    }
  }

  @container lotics-boundary (width < 768px) {
    .lotics-dialog__viewport {
      align-items: flex-end;
    }
  }

  .lotics-dialog__popup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    /* `min-height: 0` lets the scroller inside give. */
    height: auto;
    max-height: 100%;
    min-height: 0;
    background-color: var(--card);
    --lotics-register-ground: var(--card);
    color: var(--lotics-ink-default);
    border-radius: 0;
    /* The scroll area scrolls, not the popup, which would take the header. */
    overflow: hidden;
  }

  /*
   * The takeover is the whole screen at every width with no scrim; it ignores content height, and
   * its header's hairline marks where the scroll starts.
   */
  .lotics-dialog__popup[data-surface="takeover"] {
    height: 100%;
  }

  .lotics-dialog__popup[data-surface="takeover"] .lotics-dialog__header {
    border-bottom: 1px solid var(--border);
  }

  /* Squared, a sheet shorter than the screen would read as cut off. */
  .lotics-dialog__popup:not([data-surface="takeover"]) {
    border-start-start-radius: var(--lotics-radius-overlay);
    border-start-end-radius: var(--lotics-radius-overlay);
  }

  @media (width >= 768px) {
    .lotics-dialog__popup:not([data-surface="takeover"]) {
      margin-top: var(--lotics-dialog-offset-top);
      width: var(--lotics-dialog-width);
      height: var(--lotics-dialog-height);
      max-width: var(--lotics-dialog-max-width);
      max-height: var(--lotics-dialog-max-height);
      border-radius: var(--lotics-radius-overlay);
    }
  }

  @container lotics-boundary (width >= 768px) {
    .lotics-dialog__popup:not([data-surface="takeover"]) {
      margin-top: var(--lotics-dialog-offset-top);
      width: var(--lotics-dialog-width);
      height: var(--lotics-dialog-height);
      max-width: var(--lotics-dialog-max-width);
      max-height: var(--lotics-dialog-max-height);
      border-radius: var(--lotics-radius-overlay);
    }
  }

  @container lotics-boundary (width < 768px) {
    .lotics-dialog__popup:not([data-surface="takeover"]) {
      margin-top: 0;
      width: 100%;
      height: auto;
      max-width: none;
      max-height: 100%;
      border-radius: 0;
      border-start-start-radius: var(--lotics-radius-overlay);
      border-start-end-radius: var(--lotics-radius-overlay);
    }
  }

  .lotics-dialog__close {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    padding-top: var(--lotics-space-16);
    padding-bottom: var(--lotics-space-8);
    padding-inline: var(--lotics-dialog-gutter);
  }

  .lotics-dialog__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-8);
    min-height: 56px;
    padding-bottom: var(--lotics-space-8);
    padding-inline: var(--lotics-dialog-gutter);
  }

  /*
   * With a title, the ✕ rides its row rather than a blank band; the title centres on the button and
   * never runs under it.
   */
  .lotics-dialog__popup:has(.lotics-dialog__header) {
    position: relative;
  }

  .lotics-dialog__popup:has(.lotics-dialog__header) > .lotics-dialog__close {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    /* The content's positioned boundary paints later and would take the ✕'s presses. */
    z-index: var(--lotics-z-sticky-header);
  }

  .lotics-dialog__popup:has(> .lotics-dialog__close) .lotics-dialog__header {
    min-height: calc(var(--lotics-space-16) + var(--lotics-control-height) + var(--lotics-space-8));
    padding-top: var(--lotics-space-16);
    padding-inline-end: calc(var(--lotics-dialog-gutter) + var(--lotics-control-height) + var(--lotics-space-8));
  }

  .lotics-dialog__title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    /* `flex: 1` never shrinks below content. */
    min-width: 0;
  }

  .lotics-dialog__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
  }

  /* Never `flex: 1`: a zero basis in an auto-height sheet collapses the body. */
  .lotics-dialog__scroll-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    /*
     * A scroller clips, so the first child lost half its focus ring. The bottom is scroll runout, a
     * different rung.
     */
    padding-top: var(--lotics-space-8);
    padding-bottom: var(--lotics-space-24);
    padding-inline: var(--lotics-dialog-gutter);
  }

  /*
   * A scroller without focusable content is a tab stop; the ring is drawn inside the clipped
   * corners.
   */
  .lotics-dialog__scroll-area:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: calc(var(--lotics-ring-width) * -1);
  }

  .lotics-dialog__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-8);
    padding-block: var(--lotics-space-16);
    padding-inline: var(--lotics-dialog-gutter);
    border-top: 1px solid var(--border);
  }

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

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

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

}