.c-pagination,
.c-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.c-pagination .page-numbers,
.c-pagination .post-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--control-height);
  min-block-size: var(--control-height);
  padding: var(--space-2);
  border: var(--border-width-sm) solid var(--color-border);
}

.c-pagination [aria-current="page"] {
  color: var(--color-on-action);
  background: var(--color-action);
}

/* Wspólny wariant z Figmy 2056:4764: licznik i dwa kierunki nawigacji. */
.c-pagination--steps {
  flex-direction: column;
  align-items: center;
  inline-size: min(100%, 23.75rem);
  margin-inline: auto;
  margin-block-start: var(--space-7);
}
.c-pagination__status { inline-size: 100%; text-align: center; }
.c-pagination__controls { display: flex; gap: var(--space-3); inline-size: 100%; }
.c-pagination__button {
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: 0;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  border-color: currentColor;
  white-space: nowrap;
}
.c-pagination__button img { display: block; flex: none; }
.c-pagination__button--previous img { transform: rotate(180deg); }
.c-pagination__button:hover { color: var(--color-text); background: var(--color-surface-tint); }
.c-pagination__button:disabled { color: var(--color-placeholder); border-color: currentColor; background: transparent; opacity: 1; }
@media (max-width: 23.749rem) {
  .c-pagination__button { gap: var(--space-1); padding-inline: var(--space-2); white-space: normal; }
}

.c-pagination__count { text-align: center; color: var(--color-text-secondary); }
.c-pagination__count > span { color: var(--color-text); }