@import './theme/default';
@import './theme/font';

.zent-pagination {
  display: flex;
  justify-content: flex-end;
  font-size: $font-size-normal;
  @include theme-color(color, stroke, 1);

  &--normal {
    .zent-pagination-button--layout + .zent-pagination-button--layout,
    .zent-btn-disabled-wrapper + .zent-pagination-button--layout,
    .zent-btn-disabled-wrapper + .zent-btn-disabled-wrapper,
    .zent-pagination-button--layout + .zent-btn-disabled-wrapper {
      margin-left: 4px;
    }
  }

  &--lite {
    .zent-pagination-button--layout + .zent-pagination-button--layout,
    .zent-btn-disabled-wrapper + .zent-pagination-button--layout,
    .zent-btn-disabled-wrapper + .zent-btn-disabled-wrapper,
    .zent-pagination-button--layout + .zent-btn-disabled-wrapper {
      margin-left: 0;
    }
  }

  &-page-list--mini {
    display: flex;
    margin: 0 8px;
  }

  &-arrow,
  &-more {
    @include theme-color(stroke, stroke, 1);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
  }

  &-page-number-button.zent-btn,
  &-arrow-button.zent-btn {
    padding: 0 5px;
    min-width: 32px;
    position: relative;
    transition: none;

    &:not(.zent-btn-primary) {
      @include theme-color(background-color, stroke, 9);
      @include theme-color(border-color, stroke, 5);

      &:hover,
      &:active {
        @include theme-color(background, stroke, 7);
      }
    }

    &[disabled] {
      .zent-pagination-arrow {
        @include theme-color(stroke, stroke, 4);
      }
    }
  }

  &-arrow-button.zent-btn {
    .zenticon {
      margin: 0;
    }
  }

  &-page-button--no-border.zent-btn:not(.zent-btn-primary) {
    border-color: transparent;

    &:hover,
    &:active {
      @include theme-color(background, stroke, 9);
      @include theme-color(color, primary, 4);
      border-color: transparent;
    }

    &:active {
      @include theme-color(color, primary, 3);
    }

    &.zent-pagination-arrow-button[disabled] {
      @include theme-color(background, stroke, 9);

      .zent-pagination-arrow {
        @include theme-color(stroke, stroke, 6);
      }
    }

    &.zent-pagination-arrow-button:not([disabled]) {
      &:hover {
        .zent-pagination-arrow {
          @include theme-color(stroke, primary, 4);
        }
      }

      &:active {
        .zent-pagination-arrow {
          @include theme-color(stroke, primary, 3);
        }
      }
    }
  }

  &-arrow-button--double {
    &:hover,
    &:active,
    &-active {
      border-color: transparent;
    }

    &:hover {
      .zent-pagination-arrow {
        @include theme-color(stroke, primary, 4);
      }
    }

    &:active,
    &-active {
      background: transparent;

      .zent-pagination-arrow {
        @include theme-color(stroke, primary, 3);
      }
    }
  }

  &-page-jumper,
  &-mini-page-jumper {
    display: flex;
    justify-content: center;
    align-items: center;

    .zent-input-wrapper {
      .zent-input {
        min-width: 100%;
        cursor: pointer;
      }
    }
  }

  &-page-jumper {
    margin-left: 8px;

    .zent-input-wrapper {
      margin: 0 8px;
    }

    .zent-input {
      text-align: center;
    }
  }

  &-mini-page-jumper {
    @include font-normal;
    margin: 0 8px;

    &__sep {
      margin: 0 24px;
    }

    .zent-input {
      text-align: center;
    }
  }

  &-page-size-changer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;

    .zent-select-v2 {
      margin-left: 4px;
      margin-right: 0;
    }
  }

  &-count {
    &--middle {
      margin: 0 4px;
    }

    &--right {
      margin-left: 4px;
    }
  }
}