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