@import '../../assets/scss/variables';
@import '../../assets/scss/mixins';

.pagination {
  @include margin-top(2);
  display: flex;

  &__prev {
    width: 50%;
    text-align: left;

    &-link {
      color: $color-secondary;
      font-size: 26px;
      font-weight: bold;

      &:hover,
      &:focus {
        color: $color-primary;
      }

      &--disable {
        pointer-events: none;
        color: lighten($color-gray, 20%);
      }

    }

  }

  &__next {
    width: 50%;
    text-align: right;

    &-link {
      color: $color-secondary;
      font-size: 26px;
      font-weight: bold;

      &:hover,
      &:focus {
        color: $color-primary;
      }

      &--disable {
        pointer-events: none;
        color: lighten($color-gray, 20%);
      }

    }

  }

}