/* ─────────────────────────────────────────────────────────────────────────
   PAGINATION — the server-rendered pager and the honest total.

   Graduated from .outreach-pagination when the metis person and holon lists
   turned out to need the same thing. Those two paginated at 200 rows and
   rendered no pager at all, so a 473-row list showed 200 rows, a header count
   of 473, and nothing to reconcile the two — the operator had no way to tell
   they were looking at part of the data, and a column sort silently covered
   only the visible page.

   Extend with a modifier; never fork. docs/dev/web/design-system.md §3.4
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--text-muted);
    font-size: var(--text-md);
  }

  /* Louder than the count beside it: this one changes what the buttons in the
     bulk bar will actually do, so it reads at full text colour rather than as
     muted chrome. */
  .pagination__scope {
    color: var(--text);
    font-weight: 500;
  }
}