@import '../settings/base';

$pagination_css_prefix: #{$css_prefix}_c_pagination;

.#{$pagination_css_prefix} {
  display: flex;
  align-items: center;

  li + li {
    margin-left: 10px;
  }

  &__prev {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: $color_gray_k2;
    background-color: $color_gray_k9;
    border: 1px solid $color_gray_k5;
    cursor: pointer;

    &:hover, &:active {
      color: $color_gray_k9;
      background-color: $color_primary;
      border: 1px solid $color_primary;
    }

    &--is_disabled {
      color: $color_gray_k4;
      cursor: not-allowed;

      &:hover, &:active {
        color: $color_gray_k4;
        background-color: $color_gray_k9;
        border: 1px solid $color_gray_k5;
      }
    }
  }

  &__prev_icon {
    font-size: $fontsize_medium;
  }

  &__next {
    @extend .#{$pagination_css_prefix}__prev;
  }

  &__next_icon {
    font-size: $fontsize_medium;
    transform: rotate(180deg);
  }

  &__item {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    height: 36px;
    color: $color_gray_k2;
    font-size: $fontsize_medium;
    line-height: 19px;
    background-color: $color_gray_k9;
    border: 1px solid $color_gray_k5;
    cursor: pointer;

    &:hover, &:active, &--is_active {
      color: $color_gray_k9;
      background-color: $color_primary;
      border: 1px solid $color_primary;
    }

    a {
      flex: none;
      min-width: 24px;
      text-align: center;
    }
  }

  &__item_ellipsis {
    width: 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    color: $color_gray_k2;
    text-align: center;
    user-select: none;
  }
}