/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: > 0.1% and not dead
*/

:root {
  --pagination-gap: 16px;
  --pagination-max-width: 320px;

  --pagination-item-min-width: 24px;
  --pagination-item-border-radius: var(--border-radius);
  --pagination-item-font-size: 14px;
  --pagination-item-font-weight: 400;
  --pagination-item-line-height: var(--pagination-item-min-width);
  --pagination-item-color: var(--main-color);
  --pagination-item-padding: 2px;

  --pagination-item-svg-width: 11px;
  --pagination-item-svg-height: 20px;

  --pagination-item-active-background: var(--accent-color);
  --pagination-item-active-color: var(--second-color);

  --pagination-item-hover-fill: var(--accent-color);

  --pagination-item-disabled-opacity: 0.4;
}



.pagination__list {
  display: flex;
  position: relative;
  justify-content: space-between;
  gap: var(--pagination-gap);
  max-width: var(--pagination-max-width);
  margin: 0 auto;
}

.pagination__item {
  display: block;
  position: relative;
  margin: 0;
}
.pagination__item.prev {
  margin-right: auto;
}
.pagination__item.next {
  margin-left: auto;
}

.pagination__item a {
  display: block;
  position: relative;
  min-width: var(--pagination-item-min-width);
  border-radius: var(--pagination-item-border-radius);
  font-size: var(--pagination-item-font-size);
  font-weight: var(--pagination-item-font-weight);
  line-height: var(--pagination-item-line-height);
  text-align: center;
  color: var(--pagination-item-color);
  
}

.pagination__item a svg {
  width: var(--pagination-item-svg-width);
  height: var(--pagination-item-svg-height);
  margin: auto;
}

.pagination__item:not(.prev):not(.next):hover a,
.pagination__item a:not([href]),
.pagination__item.active a {
  background: var(--pagination-item-active-background);
  color: var(--pagination-item-active-color);
}
.pagination__item a:not([href]),
.pagination__item.active a {
  pointer-events: none;
}

.pagination__item:hover a svg use {
  fill: var(--pagination-item-hover-fill);
}

.pagination__item.disabled a {
  pointer-events: none;
  opacity: var(--pagination-item-disabled-opacity);
}

.pagination__item.prev a,
.pagination__item.next a {
  padding: var(--pagination-item-padding);
}



@media screen and (min-width: 1900px) {
  :root {
    --pagination-gap: 0.83vw;
    --pagination-max-width: 16.67vw;

    --pagination-item-min-width: 1.25vw;
    --pagination-item-font-size: 0.73vw;
    --pagination-item-padding: 0.1vw;

    --pagination-item-svg-width: 0.57vw;
    --pagination-item-svg-height: 1.04vw;
  }
}