/* The house pager's pages (it-73) — templates/shared/_pager.html; the bars around them are list-card.css. Composed
   from the floating vocabulary, layout only here:
   the page-size menu is a row of .fchip (.is-selected = current), Prev / Next and every page number are .icon-btn
   --sm with .state-layer. The only visual rule of its own is the current page, which wears the same selected
   container as a selected .fchip. */

.pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
}

/* A page number is an icon button that grows past its circle for a long number ("10,000"). */
.pager__page {
  width: auto;
  min-width: var(--icon-btn-size);
  padding-inline: var(--space-2, 0.5rem);
  font: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.pager__page.is-selected {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-weight: 600;
}
.pager__gap {
  padding-inline: var(--space-1, 0.25rem);
  color: var(--md-sys-color-on-surface-variant);
}