.fizz-pagination,
.fizz-pagination-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fizz-pagination :not(:last-child) {
  margin-right: $spacing-4;
}

.fizz-pagination-list a {
  color: $color-text-body;
  display: block;
  width: $spacing-32;
  height: $spacing-32;
  border-radius: $border-radius-medium;
  text-decoration: none;
  line-height: $spacing-32;
  text-align: center;
  font-size: $text-medium-font-size;
  &:hover {
    background-color: $color-gray-100;
  }
}

.fizz-pagination-list .fizz-is-active a {
  background-color: $color-background-interactive;
  color: $color-white;
}

.fizz-pagination-list li:not(.fizz-is-active) {
  display: none;
}

.fizz-pagination-list li.fizz-is-active a {
  display: none;
}

.fizz-pagination-list li.fizz-is-active:before {
  content: "Page " attr(data-page);
}

@media (min-width: $breakpoint-m) {
  .fizz-pagination-list li:not(.fizz-is-active),
  .fizz-pagination-list li.fizz-is-active a {
    display: block;
  }
  .fizz-pagination-list li.fizz-is-active:before { 
    display: none;
  }
}

/* DEPRECATED */

.fizz-prev span,
.fizz-next span,
.fizz-prev-small span,
.fizz-next-small span {
  display: none;
}

.fizz-prev,
.fizz-next,
.fizz-prev-small,
.fizz-next-small {
  background-color: $color-background-brand;
  border: 0;
  border-radius: $border-radius-medium;
  background-size: $icon-size-small $icon-size-small;
  background-repeat: no-repeat;
}

.fizz-prev:disabled,
.fizz-next:disabled,
.fizz-prev-small:disabled,
.fizz-next-small:disabled {
  background-color: $color-background-inactive;
}

.fizz-prev,
.fizz-next {
  width: $icon-size-large;
  height: $icon-size-large;
}

.fizz-prev-small,
.fizz-next-small {
  width: $icon-size-medium;
  height: $icon-size-medium;
}

.fizz-prev,
.fizz-prev-small {
  background-image: $icon-chevron-left-inverse;
}

.fizz-next,
.fizz-next-small {
  background-image: $icon-chevron-right-inverse;  
}

.fizz-prev {
  background-position: center left calc(#{$icon-size-small} * .4375);
}

.fizz-next {
  background-position: center left calc(#{$icon-size-small} * .5625);
}

.fizz-prev-small {
  background-position: center left .1875rem;
}

.fizz-next-small {
  background-position: center right .1875rem;
}

.fizz-pagination-list > li.fizz-is-active {
  font-weight: $font-weight-semibold;
}