@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; }
  }

  /* -- Sizes ----------------------------------------------------
     Set data-size on the .pagination nav; every cell (page links, prev/next,
     ellipsis) scales. :where() keeps each rule at one class of specificity
     so the .pagination-prev padding-inline above still wins per-item.
     md == the unsized default. */
  .pagination:where([data-size="xs"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
    & .pagination-ellipsis { width: 1.75rem; height: 1.75rem; }
  }
  .pagination:where([data-size="sm"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 2rem; height: 2rem; font-size: 0.8125rem; }
    & .pagination-ellipsis { width: 2rem; height: 2rem; }
  }
  .pagination:where([data-size="md"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 2.25rem; height: 2.25rem; font-size: 0.875rem; }
    & .pagination-ellipsis { width: 2.25rem; height: 2.25rem; }
  }
  .pagination:where([data-size="lg"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 2.5rem; height: 2.5rem; font-size: 1rem; }
    & .pagination-ellipsis { width: 2.5rem; height: 2.5rem; }
  }
  .pagination:where([data-size="xl"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) { min-width: 2.75rem; height: 2.75rem; font-size: 1.125rem; }
    & .pagination-ellipsis { width: 2.75rem; height: 2.75rem; }
  }

  /* -- Variants (data-variant on the .pagination nav) -----------
     outline: every cell a bordered button; joined: one segmented bar -
     shared borders collapse, only the outer corners round (logical radii,
     so RTL mirrors for free). The active page gets a filled surface so it
     still stands out among bordered cells. */
  .pagination:is([data-variant="outline"], [data-variant="joined"]) {
    & :is(.pagination-link, .pagination-prev, .pagination-next) {
      border-color: var(--border);
      background-color: var(--background);
      box-shadow: var(--shadow-xs);
      &:hover { background-color: var(--accent); color: var(--accent-foreground); }
    }
    & .pagination-active { background-color: var(--accent); color: var(--accent-foreground); }
  }
  .pagination[data-variant="joined"] {
    & .pagination-list { gap: 0; }
    & :is(.pagination-link, .pagination-prev, .pagination-next, .pagination-ellipsis) { border-radius: 0; }
    /* the ellipsis joins the chain instead of floating between two groups */
    & .pagination-ellipsis { border: 1px solid var(--border); background-color: var(--background); }
    & .pagination-list > li:first-child > * { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
    & .pagination-list > li:last-child > * { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
    & .pagination-list > li + li > * { margin-inline-start: -1px; }
    /* the hovered / focused / active cell's own border stays on top */
    & :is(.pagination-link, .pagination-prev, .pagination-next):is(:hover, :focus-visible),
    & .pagination-active { position: relative; z-index: 1; }
  }

  /* -- Layout: split - previous / next as two equal columns across the
     full width (daisyUI's two-column pager) --------------------------- */
  .pagination[data-layout="split"] {
    width: 100%;
    & .pagination-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; }
    & .pagination-list > li { display: flex; }
    & :is(.pagination-link, .pagination-prev, .pagination-next) { flex: 1; }
  }
  .pagination[data-layout="split"][data-variant="joined"] .pagination-list { gap: 0; }

  /* -- 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; }
      &[aria-disabled="true"], &.disabled { color: GrayText; }
    }
    .pagination[data-variant="joined"] :is(.pagination-link, .pagination-prev, .pagination-next, .pagination-ellipsis) {
      border-color: ButtonText;
    }
  }
  /* -- Density ----------------------------------------------------
     data-density on the .pagination nav scales only the inter-cell gap —
     the size ladder owns cell dimensions, so size and density stay
     independent axes. Ratio mirrors sizing.css (0.75 / 1 / 1.25). */
  .pagination:where([data-density="compact"]) { & .pagination-list { gap: 0.125rem; } }
  .pagination:where([data-density="comfortable"]) { & .pagination-list { gap: 0.25rem; } }
  .pagination:where([data-density="spacious"]) { & .pagination-list { gap: 0.5rem; } }

}