// В этом файле должны быть стили для БЭМ-блока pagination, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
  margin-bottom: 32px;

  @media (min-width: $screen-xl) {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  &__item {
    box-sizing: border-box;
    display: block;
    min-width: 40px;
    border: 1px solid #eef0f7;
    padding: 8px 16px;
    border-radius: 4px;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    font: 400 12px/150% $font-family;
    letter-spacing: 0.05em;
    color: $text-color;

    @media (min-width: $screen-xl) {
      font-size: 14px;
    }

    @at-root a#{&} {
      transition: color $transition-time, background-color $transition-time,
        border-color $transition-time, outline-color $transition-time;

      &:focus,
      &:hover {
        outline: none;
        border-color: $color-cyan;
        color: $color-cyan;
      }

      &:active {
        background-color: $color-cyan;
        color: #fff;
      }
    }

    @at-root span#{&} {
      cursor: default;
    }

    &--active {
      border-color: $color-cyan;
      background-color: $color-cyan;
      color: #fff;
      cursor: default;

      &:focus,
      &:hover,
      &:active {
        color: #fff !important;
      }
    }

    &--disabled {
      opacity: 0.55;
    }
  }
}
