.pagination {
  --pagination-link-min-size: var(--control-block-size-compact);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-block-size-compact);
  min-inline-size: var(--pagination-link-min-size);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: translate var(--duration-state) var(--easing-state);
}

@media (hover: hover) {
  .pagination__link:hover {
    background-color: var(--color-surface-hover);
  }
}

.pagination__link--current {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.pagination__link--disabled {
  background-color: transparent;
  color: var(--color-text-disabled);
  cursor: default;
}

@media (hover: hover) {
  .pagination__link--disabled:hover {
    background-color: transparent;
  }
}

.pagination__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--pagination-link-min-size);
  color: var(--color-text-muted);
}

@media (width <= 48rem) {
  .pagination {
    --pagination-link-min-size: 2.25rem;
  }
}

@media (forced-colors: active) {
  .pagination__link--current {
    outline: var(--focus-ring-width) solid currentcolor;
  }

  .pagination__link--disabled {
    color: GrayText;
  }
}