/* HYPERPART: pagination */
/*
 * dz-pagination — the footer beneath a data table: a summary on one side,
 * page-number buttons on the other. Each button is an htmx affordance
 * (hx-get a page → swap the list body), so this is an Exchange component,
 * not a client widget. Numbered buttons with an ellipsis for long ranges;
 * the current page is marked `.is-current` + `aria-current="page"`.
 */

.dz-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0.25rem;
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
}

.dz-pagination-summary {
  color: var(--colour-text-muted);
}

.dz-pagination-pages {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.dz-pagination-page {
  height: 2rem;
  padding-inline: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.dz-pagination-page:hover {
  background: var(--colour-bg);
}

.dz-pagination-page:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.dz-pagination-page.is-current {
  background: var(--colour-brand);
  color: var(--colour-brand-contrast);
}

/* prev / next arrows are just page buttons; disabled at the range ends */
.dz-pagination-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dz-pagination-page:disabled:hover {
  background: transparent;
}

/* #984: ellipsis marker between non-contiguous page-button ranges. Sized to
 * match the page-button height so the row stays flat, but non-interactive
 * (no hover, no cursor). aria-hidden in markup — screen readers skip it; the
 * surrounding buttons carry the page numbers. */
.dz-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding-inline: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  user-select: none;
}