/* Pager under a paginated list (Structure::PaginationComponent).
 *
 * Summary on the left, arrows + page numbers on the right. Deliberately
 * quiet: ghost links instead of Tabler's bordered .page-link buttons, the
 * current page as a light brand-tinted pill, arrows at the same weight as
 * the list/grid view toggle. Variable aspects ride the block's custom
 * properties (FE-3); state hooks on aria attributes (FE-4).
 */
.pager {
  --pager-link-size: 2rem;
  --pager-link-color: var(--tblr-secondary);
  --pager-link-hover-bg: var(--gxp-slate-100);
  --pager-link-hover-color: var(--tblr-body-color);
  /* Current page: light brand tint with emphasised brand text, not the
     solid primary fill — the pager sits under the content, it should
     not be the brightest thing on the page. */
  --pager-current-bg: var(--tblr-primary-bg-subtle);
  --pager-current-color: var(--tblr-primary-text-emphasis);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1rem;
}

.pager-summary {
  margin: 0;
  color: var(--tblr-secondary);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.pager-pages {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  list-style: none;
}

.pager-link,
.pager-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--pager-link-size);
  block-size: var(--pager-link-size);
  padding-inline: 0.5rem;
  border-radius: var(--tblr-border-radius-pill);
  color: var(--pager-link-color);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

a.pager-link:hover,
a.pager-arrow:hover {
  background: var(--pager-link-hover-bg);
  color: var(--pager-link-hover-color);
}

.pager-link[aria-current="page"] {
  background: var(--pager-current-bg);
  color: var(--pager-current-color);
  font-weight: 600;
}

.pager-arrow[aria-disabled="true"] {
  color: var(--tblr-disabled-color);
}

.pager-gap {
  min-inline-size: var(--pager-link-size);
  color: var(--tblr-secondary);
  text-align: center;
}