.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination__item {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-weight: 600;
}

.pagination__item:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.pagination__item--active {
  background: var(--brand-navy-900);
  color: var(--text-on-brand);
}

.pagination__item--disabled {
  color: var(--text-disabled);
  pointer-events: none;
}