.pagination {
  --pagination-font-size: var(--font-size-20);
  --pagination-item-text-color: var(--font-color, var(--color-text));
  --pagination-item-background-color: var(--color-primary);
  --pagination-item-border-color: transparent;
  --pagination-item-border: 1px solid var(--pagination-item-border-color);
  --pagination-item-border-radius: var(--border-radius-smaller);
  --pagination-item-border-active: none;
  --pagination-item-hover-text-color: var(--color-white);
  --pagination-item-hover-background-color: var(--color-secondary);
  --pagination-item-active-text-color: var(--font-color, var(--color-text));
  --pagination-item-active-background-color: transparent;
  --icon-loading-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23000'%3E%3Cpath d='M463.702 162.655L442.491 14.164c-1.744-12.174-16.707-17.233-25.459-8.481l-30.894 30.894C346.411 12.612 301.309 0 254.932 0 115.464 0 3.491 109.16.005 248.511c-.19 7.617 5.347 14.15 12.876 15.234l59.941 8.569c8.936 1.304 17.249-5.712 17.125-15.058C88.704 165.286 162.986 90 254.932 90c22.265 0 44.267 4.526 64.6 13.183l-29.78 29.78c-8.697 8.697-3.761 23.706 8.481 25.459l148.491 21.211c9.784 1.475 18.381-7.034 16.978-16.978zM499.117 249.412l-59.897-8.555c-7.738-.98-17.124 5.651-17.124 16.143 0 90.981-74.019 165-165 165a165.207 165.207 0 01-64.306-13.052l28.828-28.828c8.697-8.697 3.761-23.706-8.481-25.459L64.646 333.435c-9.753-1.393-18.39 6.971-16.978 16.978l21.21 148.492c1.746 12.187 16.696 17.212 25.459 8.481l31.641-31.626C165.514 499.505 210.587 512 257.096 512c138.794 0 250.752-108.618 254.897-247.28.22-7.632-5.317-14.224-12.876-15.308z'/%3E%3C/svg%3E");
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin-top: var(--gap, clamp(20px, 5dvh, 40px));
}
.pagination__items-wrapper {
  margin-left: auto;
}
.pagination__items {
  margin: 0 auto;
  text-align: center;
  transition: var(--transition, all 0.2s ease-in-out);
  margin-left: auto;
}
.pagination__items.loading {
  opacity: 0.5;
  pointer-events: none;
}
.pagination__item {
  padding: 0;
  margin: 0;
  display: inline-block;
}
.pagination__item a {
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  padding: 0.4em 0.7em;
  display: inline-block;
  font-size: var(--pagination-font-size);
  line-height: 1em;
  color: var(--pagination-item-text-color);
  background: var(--pagination-item-background-color);
  margin: 0 0.1em;
  border: var(--pagination-item-border);
  border-radius: var(--pagination-item-border-radius);
  text-decoration: none !important;
}
.pagination__item a:hover {
  color: var(--pagination-item-hover-text-color);
  background: var(--pagination-item-hover-background-color);
}
.pagination__item.active a {
  color: var(--pagination-item-active-text-color);
  background: var(--pagination-item-active-background-color);
  cursor: default;
  pointer-events: none;
  font-weight: var(--font-weight-bold);
  border: var(--pagination-item-border-active);
}
.pagination__button {
  display: inline-flex;
  align-items: center;
}
.pagination__button:hover::before {
  background-color: var(--button-text-color-hover, var(--color-white));
}
.pagination__button::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 0;
  height: 1em;
  z-index: 5;
  mask: var(--icon-loading, var(--icon-loading-default)) center/contain no-repeat;
  background-color: var(--button-text-color, var(--color-white));
  animation: spin 1s linear infinite;
  transition: var(--transition, all 0.2s ease-in-out);
}
.pagination__button.loading::before {
  width: 1em;
  margin-right: 1em;
}
@media screen and (max-width: 480px) {
  .pagination {
    flex-direction: column;
  }
  .pagination__items-wrapper {
    margin-left: 0;
  }
  .pagination__items {
    margin-right: auto;
  }
}