spz-pagination > [role='container'] {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  height: auto;
}

spz-pagination a[page-index] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  font-size: calc(14px * var(--font-body-scale));
  line-height: calc(18px * var(--font-body-scale));
  color: var(--color-secondary-button-text);
  background-color: var(--color-secondary-button-background);
  border: 1px solid var(--color-secondary-button-border);
  border-radius: 100%;
  transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  text-decoration: none;
}

spz-pagination a[active] {
  color: var(--color-primary-button-text);
  background-color: var(--color-primary-button-background);
  border-color: var(--color-primary-button-border);
}

spz-pagination a[disabled],
spz-pagination a[page-index='...'] {
  cursor: default;
  border: none;
}

spz-pagination a[disabled] {
  display: none;
}

spz-pagination a[page-index='pre'] .atlas-icon,
spz-pagination a[page-index='next'] .atlas-icon {
  color: var(--color-secondary-button-icon);
}

spz-pagination a[page-index='pre'] {
  transform: rotate(-180deg);
}

spz-pagination a[page-index='next'] {
  transform: rotate(180deg);
}

html[dir='rtl'] spz-pagination a[page-index='pre'],
html[dir='rtl'] spz-pagination a[page-index='next'] {
  transform: none;
}

@media (min-width: 960px) {
  spz-pagination > [role='container'] {
    margin-top: 60px;
  }
}