/* ═══════════════════════════════════════════════════════════════
   PAGINATION-UI — Page navigation with prev/next + numbered cells.
   Composes <button-ui> for every interactive cell, so chrome, size,
   focus-ring, hover, disabled, and active (primary fill) all come
   from button-ui's token chain. Pagination owns only:
     - the nav-row layout (flex + gap)
     - the ellipsis cell (a plain <span>, not interactive)
     - one shape mode (`variant="button"` switches button-ui's
       composed variant to `outline` for 1×1 bordered cells)
   ═══════════════════════════════════════════════════════════════ */

@scope (pagination-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --pagination-gap:          var(--a-space-1);

    /* ── Ellipsis cell (the only piece pagination styles directly) ── */
    --pagination-ellipsis-fg:  var(--a-fg-muted);
    --pagination-ellipsis-font: var(--a-ui-size);
    text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */
  }

  :scope {
    /* ── Base ── */
    box-sizing: border-box;
    display: flex;
  }

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-flex; }

  /* ── Nav container ── */
  [slot="nav"] {
    display: flex;
    align-items: center;
    gap: var(--pagination-gap);
  }

  /* ── Nested button-ui sizing handoff ──
     button-ui resolves height + min-width from `--a-size` (= 24/30/36 px
     at sm/md/lg per the universal size system). We set --a-icon-size for
     prev/next so the caret reads at typographic optical-size pairing
     with the page-number labels (0.875em ≈ 14px at 16px base). */
  [slot="nav"] button-ui {
    --a-icon-size: 0.875em;
  }

  /* ── Ellipsis (plain text span — not interactive) ── */
  [slot="nav"] [data-ellipsis] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Match the height of the nested button-ui so the row baseline aligns */
    min-width: var(--a-size);
    height: var(--a-size);
    color: var(--pagination-ellipsis-fg);
    font-size: var(--pagination-ellipsis-font);
    pointer-events: none;
    user-select: none;
    line-height: 1;
  }

  /* ── variant="button" — square 1:1 cells via outline button-ui ──
     The class JS swaps each non-active button-ui from `variant="ghost"`
     to `variant="outline"` in this mode. CSS only nudges the inactive
     buttons to be square (button-ui's default min-width = height, but
     ghost-mode buttons can collapse below that — outline buttons keep
     aspect-ratio 1 here for the bordered-cell look). */
  :scope[variant="button"] [slot="nav"] button-ui {
    aspect-ratio: 1;
    /* 1:1 cells inherit button-ui's --a-radius-md (~13px), which on a square
       cell is ~37% of the side → a circle, not the "square 1:1 bordered button"
       the variant promises. Tighten to -sm so the bordered cells read as rounded
       squares. Same square+large-radius trap as otp-input (bug-37 / bug-39). */
    --button-radius: var(--a-radius-sm);
  }
}
