@layer components {
  .pagination { display: flex; justify-content: center; }
  .pagination-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
  .pagination-link, .pagination-prev, .pagination-next {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding-inline: 0.5rem;
    border: 1px solid transparent; border-radius: var(--radius-md);
    font-size: 0.875rem; color: var(--foreground); text-decoration: none;
    cursor: pointer; outline: none;
    transition: background-color 150ms ease, border-color 150ms ease; gap: 0.25rem;
    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 1rem; height: 1rem; flex-shrink: 0; }

    /* Disabled state for prev/next at boundaries */
    &[aria-disabled="true"], &.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
  .pagination-prev, .pagination-next { padding-inline: 0.75rem; gap: 0.375rem; }
  .pagination-active { border-color: var(--border); background-color: var(--background); font-weight: 500; }
  .pagination-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; color: var(--muted-foreground);
    & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .pagination-link, .pagination-prev, .pagination-next { transition: none; }
  }

  @media (prefers-contrast: more) {
    .pagination-link, .pagination-prev, .pagination-next {
      border-color: var(--border);
      &:hover { border-color: var(--foreground); }
    }
    .pagination-active { border-width: 2px; }
  }

  @media (forced-colors: active) {
    .pagination-active {
      border-color: Highlight;
    }
    .pagination-link, .pagination-prev, .pagination-next {
      &:hover { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    }
  }
}