/*
 * THE RIGHT-DOCKED PANEL, full width below 768. Title, pager and close are the panel's own grid
 * children, drawn in DOM order so Tab walks the bar as the eye does. Title and scroll area share
 * one gutter, the contract `DrawerScrollArea` keeps.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

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

  /* Pushes the panel right, so only its width is stated. */
  .lotics-drawer__viewport {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    z-index: var(--lotics-z-overlay);
  }

  /*
   * The title is the only thing that can give. Below the split a stepped panel's controls take the
   * top line and the name the line under them. The bar row's beat is 56; the body takes `minmax(0,
   * 1fr)` so a long record cannot push its scroller past the panel.
   */
  .lotics-drawer__popup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: minmax(56px, auto) auto minmax(0, 1fr);
    grid-template-areas:
      "title page close"
      "nav nav nav"
      "body body body";
    align-items: center;
    width: 100%;
    min-height: 0;
    background-color: var(--card);
    --lotics-register-ground: var(--card);
    color: var(--lotics-ink-default);
    box-shadow: var(--lotics-shadow-panel);
    /* The panel takes focus on opening only to hold it inside; a ring round the whole panel framed the
       screen's edge in the UA's dark outline. Its controls carry their own rings. */
    outline: none;
  }

  /*
   * A stepped panel's controls on a fixed top line at every width, and the name the whole line under
   * them, so the name ends where the body does and never shares its line with the pager. Controls on
   * top: a close drawn above a pager Tab reaches first would break reading order (WCAG 2.4.3).
   */
  .lotics-drawer__popup[data-stepped] {
    grid-template-areas:
      "nav page close"
      "title title title"
      "body body body";
  }

  @media (min-width: 768px) {
    .lotics-drawer__popup {
      width: var(--lotics-drawer-width);
    }

    .lotics-drawer__popup:not([data-stepped]) {
      grid-template-columns: minmax(0, 1fr) auto auto auto;
      grid-template-rows: minmax(56px, auto) minmax(0, 1fr);
      grid-template-areas:
        "title nav page close"
        "body body body body";
    }
  }

  .lotics-drawer__title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-area: title;
    min-width: 0;
    padding-block: var(--lotics-space-16) var(--lotics-space-8);
    padding-inline-start: var(--lotics-space-16);
  }

  /* The whole line under the pager: its far edge is the body's. */
  .lotics-drawer__popup[data-stepped] .lotics-drawer__title {
    padding-inline-end: var(--lotics-space-16);
  }

  .lotics-drawer__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-area: nav;
    justify-self: start;
    gap: var(--lotics-space-2);
    padding-inline-start: var(--lotics-space-16);
    padding-block-end: var(--lotics-space-8);
  }

  /* The pager's glyph mirrors the close's inset at the other end. */
  .lotics-drawer__popup[data-stepped] .lotics-drawer__nav {
    padding-block: 0;
    padding-inline-start: var(--lotics-space-8);
  }

  .lotics-drawer__popup[data-stepped] .lotics-drawer__title {
    padding-block-start: 0;
  }


  /* A way to the page of what the drawer shows, on the controls' line just before the close. */
  .lotics-drawer__page {
    grid-area: page;
    margin-inline-end: var(--lotics-space-4);
  }

  /* The `IconButton`'s padding would push its glyph inside the title's edge. */
  .lotics-drawer__close {
    grid-area: close;
    margin-inline-end: var(--lotics-space-12);
  }

  /* Stretches against a bar row that centres its contents. */
  .lotics-drawer__body {
    grid-area: body;
    align-self: stretch;
    min-height: 0;
  }

  .lotics-drawer__scroll-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    /* Named, so a strip pinned inside takes it back and stands flush with the scroll's top. */
    --lotics-drawer-inset: var(--lotics-space-16);
    padding: var(--lotics-drawer-inset);
  }

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

  .lotics-drawer__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: var(--lotics-space-12);
    padding-block: var(--lotics-space-12);
    padding-inline: var(--lotics-space-16);
    border-top: 1px solid var(--border);
  }
}