/*
 * DD-11 Pagination — app/components/ui/pagination_component.rb
 *
 * Sits below a DD-01 table inside the same card, --border-hairline above.
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-top: var(--border-hairline);
}

.ui-pagination--load_more {
  display: block;
}

.ui-pagination__summary {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
  font-variant-numeric: var(--numeric-tabular);
}

.ui-pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-pagination__pills {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ui-pagination__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

/* Tap-target extension (matches the technique in milestone_list_builder.css):
   the pill itself stays painted at --control-h-sm (36px), but an invisible
   ::before extends the actual hit area out to --tap-min (44px) on every
   side — a click on the extra 4px margin still lands on the <a>, since
   generated content is part of its own box for hit-testing. */
.ui-pagination__pill::before,
.ui-pagination__nav::before {
  content: "";
  position: absolute;
  inset: calc((var(--control-h-sm) - var(--tap-min)) / 2);
}

.ui-pagination__nav {
  position: relative;
}

.ui-pagination__pill:hover {
  background: var(--color-surface-hover);
  color: var(--color-ink);
}

.ui-pagination__pill--current {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.ui-pagination__pill--current:hover {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.ui-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h-sm);
  color: var(--color-ink-soft);
}