/* Three numeric slots plus two dots. Only the middle number/dots exchange
   space; the outer arrows never move, even when page numbers gain a digit. */
.toolbar-pagination .pagination.pagination-fixed {
  --pagination-button: 34px;
  --pagination-gap: 4px;
  display: grid;
  grid-template-columns: var(--pagination-button) var(--pagination-button) var(--pagination-before, 0px) var(--pagination-button) var(--pagination-after, 12px) var(--pagination-button) var(--pagination-button);
  align-items: center;
  justify-content: start;
  gap: var(--pagination-gap);
  width: calc(5 * var(--pagination-button) + 12px + 6 * var(--pagination-gap));
  min-width: 0;
  flex: 0 0 auto;
}
.toolbar-pagination .pagination.pagination-fixed button {
  width: var(--pagination-button); min-width: var(--pagination-button); max-width: var(--pagination-button); height: 36px;
  padding: 0; font-size: 12px; font-variant-numeric: tabular-nums;
}
.toolbar-pagination .pagination.pagination-fixed .pagination-dots {
  display: block; padding: 0; width: 100%; text-align: center;
  font-size: 12px; letter-spacing: 1px; overflow: hidden;
}
.pagination-fixed .pagination-placeholder { visibility: hidden; pointer-events: none; }

@media (max-width: 760px) {
  .toolbar-pagination { flex-wrap: nowrap; }
  .toolbar-pagination .pagination.pagination-fixed {
    --pagination-button: clamp(24px, 8vw, 34px);
    --pagination-gap: 2px;
  }
  .toolbar-pagination .page-size-control { gap: 5px; height: 36px; }
  .toolbar-pagination .page-size-control > span { font-size: 0; }
  .toolbar-pagination .page-size-control > span::after { content: 'Per page'; font-size: 9px; }
  .toolbar-pagination .page-size-control select { width: 56px; height: 36px; padding: 0 14px 0 6px; font-size: 12px; }
}
@media (max-width: 360px) {
  .toolbar-pagination .page-size-control > span { display: none; }
}