.pagination {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  font-weight: 500;

  &_tablet {
    @include media-breakpoint-only(md) {
      // sass-lint:disable no-important
      display: flex !important;
    }
  }

  &__item {
    & + & {
      margin: 0 0 0 10px;
    }
  }

  &__link {
    border: 1px solid transparent;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    min-width: 26px;
    width: auto;
    color: $gray-dark;
    text-decoration: none;

    &:hover {
      border-radius: 3px;
      border-color: $blue;
      text-decoration: none;
    }

    &_active {
      border-radius: 3px;
      background: $gray-light;
      color: $warm-grey;
      cursor: default;

      &:hover {
        border-color: transparent;
        color: $warm-grey;
        text-decoration: none;
      }
    }
  }

  &__btn {
    display: inline-block;
    color: $blue;
    font-size: 1rem;
    height: 26px;
    padding-top: 1px;
    text-align: center;
    width: 26px;

    &:hover {
      border-radius: 3px;
      background: $blue;
      color: $white;
    }
  }
}