@import "../variables.scss";
// @import '../utils.scss';
@import "./variables.scss";
@import "~@alifd/next/lib/core/style/_global";
@import "~@alifd/next/lib/core/style/_motion";
@import "~@alifd/next/lib/pagination/scss/variable";
@import "~@alifd/next/lib/pagination/scss/mixin";

//前后按钮的圆角问题
#{$pagination-prefix} {
  &-pages {
    #{$pagination-prefix}-item.#{$css-prefix}prev {
      border-top-left-radius: $b-design-pagination-btn-corner;
      border-bottom-left-radius: $b-design-pagination-btn-corner;

      &[disabled],
      &[disabled]:hover {
        // background-color: $b-design-pagination-btn-disabled-bg;
        // border-color: $b-design-pagination-btn-disabled-bg;
      }
    }

    #{$pagination-prefix}-item.#{$css-prefix}next {
      border-top-right-radius: $b-design-pagination-btn-corner;
      border-bottom-right-radius: $b-design-pagination-btn-corner;
    }

    #{$pagination-prefix}-item.#{$css-prefix}btn:hover {
      box-shadow: $shadow-2;
      background-color: $b-design-pagination-btn-hover-bg;
    }
  }

  &.#{$css-prefix}small {
    #{$pagination-prefix}-item {
      padding: 0px;
      width: $b-design-pagination-btn-small-size;
      height: $b-design-pagination-btn-small-size;
    }

    #{$pagination-prefix}-ellipsis {
      width: $b-design-pagination-btn-small-size;
      text-align: center;
      line-height: $b-design-pagination-btn-small-size;
    }

    #{$pagination-prefix}-item.#{$css-prefix}prev {
      border-top-left-radius: $b-design-pagination-btn-small-corner;
      border-bottom-left-radius: $b-design-pagination-btn-small-corner;
      padding: 0 $b-design-pagination-btn-small-padding;
      min-width: $b-design-pagination-btn-small-size;
      width: auto;
    }

    #{$pagination-prefix}-item.#{$css-prefix}next {
      border-top-right-radius: $b-design-pagination-btn-small-corner;
      border-bottom-right-radius: $b-design-pagination-btn-small-corner;
      padding: 0 $b-design-pagination-btn-small-padding;
      min-width: $b-design-pagination-btn-small-size;
      width: auto;
    }

    #{$pagination-prefix}-jump-go.#{$css-prefix}btn {
      height: $b-design-pagination-btn-small-size;
    }
  }

  &.#{$css-prefix}medium {
    #{$pagination-prefix}-item {
      padding: 0px;
      width: $b-design-pagination-btn-medium-size;
    }

    #{$pagination-prefix}-ellipsis {
      width: $b-design-pagination-btn-medium-size;
      text-align: center;
      line-height: $b-design-pagination-btn-medium-size;
    }

    #{$pagination-prefix}-item.#{$css-prefix}prev {
      padding: 0 $b-design-pagination-btn-medium-padding;
      min-width: $b-design-pagination-btn-medium-size;
      width: auto;
    }

    #{$pagination-prefix}-item.#{$css-prefix}next {
      padding: 0 $b-design-pagination-btn-medium-padding;
      min-width: $b-design-pagination-btn-medium-size;
      width: auto;
    }

    #{$pagination-prefix}-jump-input {
      height: $b-design-pagination-btn-medium-size;
    }
  }

  &.#{$css-prefix}large {
    #{$pagination-prefix}-item {
      padding: 0px;
      width: $b-design-pagination-btn-large-size;
    }

    #{$pagination-prefix}-ellipsis {
      width: $b-design-pagination-btn-large-size;
      text-align: center;
      line-height: $b-design-pagination-btn-large-size;
    }

    #{$pagination-prefix}-item.#{$css-prefix}prev {
      padding: 0 $b-design-pagination-btn-large-padding;
      min-width: $b-design-pagination-btn-large-size;
      width: auto;
    }

    #{$pagination-prefix}-item.#{$css-prefix}next {
      padding: 0 $b-design-pagination-btn-medium-padding;
      min-width: $b-design-pagination-btn-large-size;
      width: auto;
    }
  }

  &-jump-go {
    display: none;
  }

  &.#{$css-prefix}simple {
    .#{$css-prefix}pagination-pages {
      display: flex;
    }

    .#{$css-prefix}pagination-display {
      display: flex;
      align-items: center;
      margin: 0 $s-1;

      .#{$css-prefix}pagonation-current-input {
        width: 48px;
        margin-right: 4px;
      }

      .#{$css-prefix}pagonation-bdesign-page {
        .#{$css-prefix}input {
          display: none;
        }
      }

      em {
        .#{$css-prefix}pagonation-bdesign-page {
          .#{$css-prefix}input {
            display: block;
          }

          .#{$css-prefix}pagonation-lastPage-text {
            display: none;
          }
        }
      }
    }

    .#{$css-prefix}pagination-item {
      background: transparent !important;
      border-color: transparent !important;
      min-width: 12px !important;
      width: 12px !important;

      &:hover {
        box-shadow: none;
      }
    }
  }
}

#{$pagination-prefix}.#{$css-prefix}grey {

  #{$pagination-prefix}-item:not([disabled]) {
    background-color: white;
  }

  #{$pagination-prefix}-item.#{$css-prefix}btn:not([disabled]):hover {
    background-color: $b-design-pagination-grey-btn-hover-bg;
  }

  .#{$css-prefix}input {
    background-color: white;
  }

  .#{$css-prefix}input:not(.#{$css-prefix}focus):hover {
    border-color: white;
  }

}