@import '../../styles/variables.scss';

$page-cls-name: '#{$css-prefix}pagination';

@mixin negative-spacing() {
  margin: 0 0 0 -1px !important;
}

.#{$page-cls-name} {
  $page-jump-go-cls-name: '#{$page-cls-name}-jump-go';
  $btn-cls-name: '#{$css-prefix}btn';
  $current-cls-name: '#{$css-prefix}current';

  .#{$btn-cls-name} {
    &:not(.#{$page-jump-go-cls-name}):not(.#{$current-cls-name}) {
      background: $color-white;
    }

    &.#{$btn-cls-name}-normal:not([disabled]):not(.#{$current-cls-name}):not(.#{$page-jump-go-cls-name}):hover {
      color: $color-text1-5;
      border-color: $color-line1-4;
      z-index: 1;

      .#{$css-prefix}icon {
        color: $color-text1-5;
      }
    }

    &.#{$current-cls-name} {
      border-color: $color-brand1-6;
      z-index: 1;
    }

    &.#{$css-prefix}pagination-jump-go {
      margin-left: $size-base * 2;
    }

    &.#{$css-prefix}small {
      min-width: $size-base * 6;
    }

    &.#{$css-prefix}medium {
      min-width: $size-base * 8;
    }

    &.#{$css-prefix}large {
      min-width: $size-base * 9;
    }
  }

  &-list {
    @include negative-spacing();

    .#{$css-prefix}btn {
      @include negative-spacing();
    }
  }

  &-item {
    &.#{$css-prefix}next {
      @include negative-spacing();
    }
  }

  &-jump-input {
    &.#{$css-prefix}input {
      margin: 0 8px;

      input {
        padding: 0 4px;
        text-align: center;
      }
    }
  }

  &-size-selector {
    .#{$css-prefix}select {
      margin: 0;
    }
  }
}