/* The line under a short list: how many are showing on the left, the pages
   on the right (shared/_list_pager). */
.list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
}

.list-pager__pages {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.list-pager__link {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;

  &:hover { color: var(--color-base-content); background: var(--color-base-200); }
}

.list-pager__page {
  width: 2.5rem;
  height: 1.875rem;
  margin: 0 0.25rem;
  border: 1.5px solid var(--color-primary);
  border-radius: 0.5rem;
  background: var(--color-base-100);
  color: var(--color-primary);
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;

  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
}