.pagination {
  display: flex;
  align-items: center;
  gap: var(--pagination-gap, 6px);
  justify-content: center;
  flex-wrap: wrap;
}

.pagination__button,
.pagination__page {
  min-width: var(--pagination-size, 36px);
  height: var(--pagination-size, 36px);
  border-radius: var(--pagination-radius, 10px);
  color: var(--pagination-color, #475467);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pagination-font-size, 13px);
  font-weight: 600;
  border: var(--pagination-border, 1px solid #dbe1ea);
  background: var(--pagination-bg, #ffffff);
  box-shadow: var(--pagination-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease,
    background 160ms ease, box-shadow 160ms ease;
}

.pagination__button {
  min-width: auto;
  padding: 0 4px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.pagination__button:hover,
.pagination__page:hover {
  transform: translateY(-1px);
}

.pagination__button:hover {
  color: #1d2939;
}

.pagination__page:hover {
  border-color: #cfd6e1;
  color: #1d2939;
}

.pagination__page.is-current {
  background: var(--pagination-current-bg, #24459b);
  border-color: var(--pagination-current-border, #24459b);
  color: var(--pagination-current-color, #ffffff);
  box-shadow: 0 10px 20px rgba(36, 69, 155, 0.18);
}

.pagination__button.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pagination__ellipsis {
  min-width: 18px;
  color: #98a2b3;
  font-size: var(--pagination-font-size, 13px);
  font-weight: 700;
  text-align: center;
}

.pagination__button i {
  width: var(--pagination-icon-size, 18px);
  height: var(--pagination-icon-size, 18px);
}