// @import "../_utils.scss";
// @import "./select.scss";
// @import "./select-dropdown.scss";
.#{$page-prefix-cls} {
  user-select: none;
  -webkit-user-slect: none;
  -ms-user-slect: none;
  -moz-user-slect: none;
  font-size: $page-font-size;

  //@include structure-font-size($__page-default_font-size, 0);

  &::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
  }

  &-item {
    display: inline-block;
    //float: left;
    vertical-align: middle;
    min-width: $page-item-min-width;
    margin-right: $page-item-margin-right;
    text-align: center;
    list-style: none;
    background-color: $page-item-background-color;
    user-select: none;
    cursor: pointer;
    font-family: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", sans-serif;
    border: 1px solid $border-color-base;
    border-radius: $btn-border-radius;
    //transition: all @transition-time @ease-in-out;
    transition: border $transition-time $ease-in-out, color $transition-time $ease-in-out;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include computed-height($--size-height-base, 1px);
    } @else {
      height: $page-item-height;
      line-height: $page-item-line-height;
    }
    @include theme-background-color($__page-item_background-color);
    @include theme-border-color($__page-item_border-color);

    a {
      margin: $page-a-margin;
      text-decoration: none;
      color: $page-a-color;

      @include theme-font-color($__page-item-a_font-color);
      //transition: none;
    }

    &:hover {
      border-color: $primary-color;

      @include theme-border-color($__page-item_hover_border-color);
      @include theme-background-color($__page-item_hover_background-color);

      a {
        color: $primary-color;

        @include theme-font-color($__page-item-a_hover_font-color);
      }
    }

    &-active {
      background-color: $primary-color;
      border-color: $primary-color;

      @include theme-background-color($__page-item_active_background-color);
      @include theme-border-color($__page-item_active_border-color);

      a,
      &:hover a {
        color: $page-item-active-hover-a-color;

        @include theme-font-color($__page-item-a_active_font-color);
      }
    }
  }

  &-item-jump-prev,
  &-item-jump-next {
    margin-right: $page-item-jump-next-margin-right;

    &::after {
      content: "•••";
      display: block;
      letter-spacing: 1px;
      color: $page-jump-next-after-color;
      text-align: center;

      @include theme-font-color($__page-item-jump-prev-after_font-color);
    }

    i {
      display: none;
    }

    &:hover {
      &::after {
        display: none;
      }

      i {
        display: inline;
      }
    }
  }

  &-item-jump-prev:hover {
    i::after {
      content: "\e733";
      margin-left: $page-item-jump-prev-hover-after-margin-left;
    }
  }

  &-item-jump-next:hover {
    i::after {
      content: "\e704";
      margin-left: $page-item-jump-next-hover-after-margin-left;
    }
  }

  &-prev {
    margin-right: $page-prev-margin-right;
  }

  // &-item-jump-prev,
  // &-item-jump-next {
  //   margin-right: $page-item-jump-next-margin-right;
  // }

  &-next {
    margin-left: $page-next-margin-left;
  }

  &-prev,
  &-next,
  &-item-jump-prev,
  &-item-jump-next {
    display: inline-block;
    vertical-align: middle;
    min-width: $page-item-min-width;
    list-style: none;
    text-align: center;
    cursor: pointer;
    color: $page-jump-next-color;
    font-family: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", sans-serif;
    border: 1px solid $border-color-base;
    border-radius: $btn-border-radius;
    transition: all $transition-time $ease-in-out;
    a {
      @if $--size-switch == yes {
        display: block;
      }
    }
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include computed-height($--size-height-base, 1px);
    } @else {
      height: $page-item-height;
      line-height: $page-item-line-height;
    }

    @include theme-font-color($__page-item-jump-prev_font-color);
    @include theme-border-color($__page-item-jump-prev_border-color);
  }

  &-prev,
  &-next {
    //background-color: #F7F7F7;
    a {
      color: $page-next-a-color;
      font-size: $page-next-a-font-size;
      @if $--size-switch == yes {
        display: block;
      }

      @include theme-font-color($__page-prev-a_font-color);
    }

    &:hover {
      border-color: $primary-color;

      @include theme-border-color($__page-prev_hover_border-color);

      a {
        color: $primary-color;

        @include theme-font-color($__page-prev-a_hover_font-color);
      }
    }
  }

  &-disabled {
    cursor: $cursor-disabled;
    background-color: $page-disabled-bgcolor;
    border-color: $page-disabled-color;

    @include theme-background-color($__page_disabled_background-color);
    @include theme-border-color($__page_disabled_border-color);

    a {
      color: $page-disabled-color;

      @include theme-font-color($__page-a_disabled_font-color);
    }

    &:hover {
      border-color: $page-disabled-hover-border-color;

      @include theme-border-color($__page_disabled_hover_border-color);

      a {
        color: $page-disabled-color;
        cursor: $cursor-disabled;

        @include theme-font-color($__page-a_disabled_hover_font-color);
      }
    }
  }

  &-options {
    display: inline-block;
    vertical-align: middle;
    //float: left;
    margin-left: $page-options-margin-left;

    &-sizer {
      display: inline-block;
      //float: left;
      margin-right: $page-options-sizer-margin-right;
      text-align: center;

      @include theme-font-color($__page-sizer-label_font-color);

      .#{$select-prefix-cls}-single {
        @if $--size-switch == no {
          height: $page-item-height;
        }

        .#{$select-prefix-cls}-selection {
          @if $--size-switch == no {
            height: $page-item-height;
          }

          @include theme-background-color($__page-options-selectiong_background-color);

          .#{$select-prefix-cls}-placeholder {
            @if $--size-switch == no {
              height: $page-option-select-height;
              line-height: $page-option-select-height;
            }
          }

          .#{$select-prefix-cls}-selected-value {
            @if $--size-switch == no {
              height: $page-option-select-height;
              line-height: $page-option-select-height;
            }
          }
        }
      }
    }

    &-sizer-label {
      @if $--size-switch == yes {
        @include computed-height($--size-height-base, 0);
        vertical-align: middle;
        font-size: $--size-font-size-base;
      }
      display: inline-block;
      margin-right: $page-options-sizer-label-margin-right;

      @include theme-font-color($__page-sizer-label_font-color);
    }

    &-elevator {
      display: inline-block;
      vertical-align: middle;
      //float: left;
      @if $--size-switch == yes {
        font-size: $--size-font-size-base;
        line-height: $--size-line-height-base;
      } @else {
        height: $page-item-height;
        line-height: $page-item-height;
        font-size: $page-font-size;
      }

      @include theme-font-color($__page-options-elevator_font-color);

      input {
        @include input();
        @if $--size-switch == yes {
          height: initial;
          @include computed-height($--size-height-base, 1px);
        } @else {
          line-height: $page-options-elevator-input-line-height;
          height: $page-item-height;
        }
        border-radius: $btn-border-radius;
        margin: $page-options-elevator-input-margin;
        width: $page-options-elevator-input-width;
      }
    }

    &-reload {
      display: inline-block;
      vertical-align: middle;
      margin-left: $page-options-reload-margin-left;

      a {
        display: inline-block;
        vertical-align: middle;
        min-width: $page-options-reload-a-min-width;
        @if $--size-switch == yes {
          @include computed-height();
          font-size: $--size-font-size-base;
          i {
            line-height: $--size-font-size-base;
          }
        } @else {
          height: $page-options-reload-a-height;
          line-height: $page-options-reload-a-line-height;
        }
        list-style: none;
        text-align: center;
        cursor: pointer;
        color: $page-options-reload-a-color;
        font-family: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", sans-serif;
        border: $page-options-reload-a-border;
        border-radius: $page-options-reload-a-border-radius;
        transition: $page-options-reload-a-transition;

        @include theme-font-color($__page-options-reload-a_font-color);
        @include theme-border-color($__page-options-reload-a_border-color);
      }
    }
  }

  &-total {
    display: inline-block;
    //float: left;
    @if $--size-switch == yes {
      vertical-align: middle;
      font-size: $--size-font-size-base;
      @include computed-height($--size-height-base, 0);
    } @else {
      height: $btn-circle-size;
      line-height: $btn-circle-size;
    }
    margin-right: $page-total-margin-right;

    @include theme-font-color($__page-total_font-color);
  }

  &-simple &-prev,
  &-simple &-next {
    margin: $page-simple-next-margin;
    border: $page-simple-next-border;
    @if $--size-switch == no {
      height: $page-simple-next-height;
      line-height: $page-simple-next-line-height;
      font-size: $page-simple-next-font-size;
    } @else {
      @include computed-height($--size-height-base - 4px, 0);
      line-height: min($--size-height-base - 4px - max(($--size-height-base - 4px - $--size-line-height-base) / 2, 0), $--size-line-height-base);
    }

    @include theme-border-color($__page-simple-pager-input_border-color);
  }

  &-simple > &-disabled {
    background: $page-simple-disabled-background;

    @include theme-background-color($__page-simple_disabled_background-color);
  }

  &-simple &-simple-pager {
    display: inline-block;
    //float: left;
    margin-right: $page-simple-margin-right;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      line-height: min($--size-height-base - 6px - max(($--size-height-base - 4px - $--size-line-height-base) / 2 - 1px, 0), $--size-line-height-base);
      vertical-align: middle;
    }

    @include theme-font-color($__page-simple-pager_font-color);

    input {
      min-width: $page-simple-input-min-width;
      margin: $page-simple-input-margin;
      @if $--size-switch == no {
        height: $page-simple-input-height;
        padding: $page-simple-input-padding;
      } @else {
        font-size: $--size-font-size-base;
        @include computed-height($--size-height-base - 4px);
        line-height: min($--size-height-base - 6px - max(($--size-height-base - 4px - $--size-line-height-base) / 2 - 1px, 0), $--size-line-height-base);
      }
      text-align: center;
      box-sizing: border-box;
      background-color: $page-simple-input-background-color;
      outline: none;
      border: 1px solid $border-color-base;
      border-radius: $btn-border-radius;
      transition: border-color $transition-time $ease-in-out;

      @include theme-font-color($__page-simple-pager-input_font-color);
      @include theme-background-color($__page-simple-pager-input_background-color);
      @include theme-border-color($__page-simple-pager-input_border-color);

      &:hover {
        border-color: $primary-color;

        @include theme-border-color($__page-simple-pager-input_hover_border-color);
      }
    }

    span {
      padding: $page-simple-span-padding;
    }
    span.#{$page-prefix-cls}-allpage {
      display: inline-block;
      padding-right: 0;
    }
  }

  //合并
  &.mini &-disabled {
    background-color: $page-mini-background-color;

    @include theme-background-color($__page-mini-disabled_background-color);
  }

  &.mini &-total {
    @if $--size-switch == yes {
      @include computed-height($--size-height-base - 4, 0);
    } @else {
      height: $btn-circle-size-small;
      line-height: $btn-circle-size-small;
    }
  }

  &.mini &-item {
    @if $--size-switch == yes {
      @include computed-height($--size-height-base - 4, 0);
    } @else {
      height: $btn-circle-size-small;
      line-height: $btn-circle-size-small;
    }
    border: $page-mini-item-border;
    margin: $page-mini-item-margin;
    min-width: $btn-circle-size-small;
    border-radius: $btn-border-radius-small;

    @include theme-border-color($__page-mini-item_border-color);
  }

  &.mini &-prev,
  &.mini &-next {
    @if $--size-switch == yes {
      @include computed-height($--size-height-base - 4, 0);
    } @else {
      height: $btn-circle-size-small;
      line-height: $btn-circle-size-small;
    }
    margin: $page-mini-next-margin;
    min-width: $btn-circle-size-small;
    border: $page-mini-next-border;

    @include theme-border-color($__page-mini-prev_border-color);

    a {
      i::after {
        height: $btn-circle-size-small;
        line-height: $btn-circle-size-small;
      }
    }
  }

  &.mini &-item-jump-prev,
  &.mini &-item-jump-next {
    @if $--size-switch == yes {
      @include computed-height($--size-height-base - 4, 0);
    } @else {
      height: $btn-circle-size-small;
      line-height: $btn-circle-size-small;
    }
    border: none;
    margin-right: $page-mini-item-jump-next-margin-right;
  }

  &.mini &-options {
    margin-left: $page-mini-options-margin-left;

    &-elevator {
      @if $--size-switch == no {
        height: $btn-circle-size-small;
        line-height: $btn-circle-size-small;
      }

      input {
        @include input-small();
        // @if $--size-switch == yes {
        //   height: $--size-height-base - 4;
        // }
        width: $page-mini-options-elevator-input-width;
      }
    }
    &-sizer-label {
      @if $--size-switch == yes {
        @include computed-height($--size-height-base - 4, 0);
      }
    }

    &-reload {
      margin-left: $page-mini-options-margin-left;

      a {
        border: $page-mini-options-reload-a-border;
        min-width: $btn-circle-size-small;
        @if $--size-switch == yes {
          @include computed-height($--size-height-base - 4);
        } @else {
          height: $btn-circle-size-small;
          line-height: $btn-circle-size-small;
        }

        @include theme-border-color($__page-mini-options-reload-a_border-color);
      }
    }

    &-sizer {
      display: inline-block;
      //float: left;
      margin-right: $page-options-sizer-margin-right;
      text-align: center;

      .#{$select-prefix-cls}-single {
        @if $--size-switch == no {
          height: $page-mini-option-select-height;
        }

        .#{$select-prefix-cls}-selection {
          @if $--size-switch == no {
            height: $page-mini-option-select-height;
          }

          .#{$select-prefix-cls}-placeholder {
            @if $--size-switch == no {
              height: $page-mini-option-select-height;
              line-height: $page-mini-option-select-height;
            }
          }

          .#{$select-prefix-cls}-selected-value {
            @if $--size-switch == no {
              height: $page-mini-option-select-height;
              line-height: $page-mini-option-select-height;
            }
          }
        }
      }
    }
  }
}