@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  .pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    justify-content: center;
    margin-block-start: var(--block-space-double);
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  /* Numbers and prev/next are the same cell; they compose .btn and only
     retune it, so the pagination file owns no button styling of its own. */
  .pagination__item {
    --btn-block-size: 2.25em;
    --btn-font-size: var(--text-small);
    --btn-icon-size: 1em;
    --btn-padding: 0 0.5em;

    font-variant-numeric: tabular-nums;
    min-inline-size: 2.25em;

    @media (any-hover: hover) {
      &:hover {
        --btn-background: var(--color-surface-subtle);
        --btn-border-color: var(--color-border-strong);
        --btn-color: var(--color-ink);
      }
    }
  }

  .pagination__gap {
    align-items: center;
    block-size: 2.25em;
    color: var(--color-ink-subtle);
    display: inline-flex;
    justify-content: center;
    min-inline-size: 1.5em;
    user-select: none;
  }

  /* Variants
  /* -------------------------------------------------------------------------- */

  .pagination__item--current {
    --btn-background: var(--color-link);
    --btn-border-color: var(--color-link);
    --btn-color: var(--color-ink-inverted);
    --btn-font-weight: 600;
    --btn-hover-brightness: 1;

    @media (any-hover: hover) {
      &:hover {
        --btn-background: var(--color-link);
        --btn-border-color: var(--color-link);
        --btn-color: var(--color-ink-inverted);
      }
    }
  }

  /* Inert prev/next. Opacity and cursor come from the shared aria-disabled
     rule in base.css, so only the hover suppression lives here. */
  .pagination__item--disabled {
    --btn-color: var(--color-ink-subtle);
    --btn-hover-brightness: 1;

    @media (any-hover: hover) {
      &:hover {
        --btn-background: var(--color-surface);
        --btn-border-color: var(--color-border);
        --btn-color: var(--color-ink-subtle);
      }
    }
  }
}