@import "../variate.less";

.@{elNamespace}-pagination{
  --@{elNamespace}-pagination-font-size: 12px;
  .@{elNamespace}-select{
    .@{elNamespace}-input{
      width: 99px;
      font-size: var('--@{elNamespace}-pagination-font-size');
      .@{elNamespace}-input__wrapper{
        padding-right: 10px;
      }
    }
  }
  &:not(.is-background){
    // 页码无背景色时
    --@{elNamespace}-pagination-button-width: 30px;
    .@{elNamespace}-pager li {
      margin: 0;
      height: 28px;
      //width: 28px;
    }
  }
  .button-disabled(){
    color: var(~'--@{elNamespace}-border-color');
    background-color: #fff;
  }
  --@{elNamespace}-pagination-button-bg-color: var(~'--@{elNamespace}-bg-color');
  &.is-background {
    .@{elNamespace}-pagination__sizes{
      margin-right: 20px;
    }
    .@{elNamespace}-pagination__editor.@{elNamespace}-input{
      width: 44px;
      min-width: 44px;
    }
    .@{elNamespace}-pagination__jump{
      margin-left: 20px;
    }
    .@{elNamespace}-pager li{
      font-size: 14px;
    }
    .btn-prev, .btn-next, .@{elNamespace}-pager li{
      border: 1px solid var('--@{elNamespace}-border-color');
      &.is-active{
        border-color: var('--@{elNamespace}-pagination-hover-color')
      }
      &:not(:disabled):hover{
        border-color: var(~'--@{elNamespace}-pagination-hover-color')
      }
    }
    .btn-prev, .btn-next{
      &:disabled{
        .button-disabled()
      }
    }
  }
  .btn-prev, .btn-next{
    &:disabled{
      .button-disabled()
    }
  }

}