@import "mixins/mixins";
@import "common/var";
@import "input";

@include b(input-number) {
  position: relative;
  display: inline-block;
  width: $--input-number-width;
  line-height: #{$--input-number-height - 2};

  .el-input {
    display: block;

    &__inner {
      -webkit-appearance: none;
      padding-left: #{$--input-number-height + 10};
      padding-right: #{$--input-number-height + 10};
      text-align: center;
      transition: none;
    }
  }
  // 点击任意一个所有边框线亮色
  &:hover {
    &:not(.is-disabled) .el-input-number__increase,
    &:not(.is-disabled) .el-input-number__decrease {
      border-color: $--input-number-border-color-hover;
    }
    &:not(.is-disabled) {
      & .el-input:not(.is-disabled) .el-input__inner {
        border-color: $--input-number-border-color-hover;
      }
    }
  }
  @include e((increase, decrease)) {
    position: absolute;
    z-index: 1;
    top: 1px;
    width: $--input-number-height;
    height: auto;
    text-align: center;
    background: $--input-number-bg-color;
    color: $--input-number-font-color;
    cursor: pointer;
    font-size: $--input-number-font-size;
    i {
      transform: scale(0.84);
    }
    &:hover:not(.is-disabled) {
      // color: $--input-number-border-color-hover;
    }

    &:active {
      border-color: $--input-number-border-color-active;
      background-color: $--input-number-bg-color-active;
      // color: $--input-number-border-color-active;

      &:not(.is-disabled) ~ .el-input:not(.is-disabled) .el-input__inner {
        border-color: $--input-number-border-color-active;
      }
    }
    // 单个禁用
    @include when(disabled) {
      color: $--input-number-font-color-disabled;
      cursor: not-allowed;

      &:hover {
        border-color: $--input-number-border-color-disabled;
      }
    }
  }

  @include e(increase) {
    right: 1px;
    border-radius: 0 $--input-number-border-radius $--input-number-border-radius 0;
    border-left: $--input-number-border;
  }

  @include e(decrease) {
    left: 1px;
    border-radius: $--input-number-border-radius 0 0 $--input-number-border-radius;
    border-right: $--input-number-border;
  }

  // 最外部禁用类(全部禁用)
  @include when(disabled) {
    @include e((increase, decrease)) {
      background-color: $--input-number-bg-color-disabled;
      border-color: $--input-number-border-color-disabled;
      color: $--input-number-font-color-disabled;

      &:hover {
        color: $--input-number-font-color-disabled;
        cursor: not-allowed;
      }
    }
  }
  // 左侧禁用
  @include when(decrease-disabled) {
    &:hover:not(.is-disabled) {
      .el-input-number__decrease {
        &:hover {
          color: $--input-number-border-color-disabled;
          border-color: $--input-number-border-color-disabled;
          & + .el-input-number__increase {
            border-color: $--input-number-border-color-disabled;
          }
          & ~ .el-input .el-input__inner {
            border-color: $--input-number-border-color-disabled;
          }
        }
        &:active {
          color: $--input-number-border-color-disabled;
          border-color: $--input-number-border-color-disabled;
          background-color: $--input-number-bg-color;
        }
      }
    }
  }
  @include when(increase-disabled) {
    &:hover:not(.is-disabled) {
      .el-input-number__increase {
        &:hover {
          color: $--input-number-border-color-disabled;
          border-color: $--input-number-border-color-disabled;
          & ~ .el-input .el-input__inner {
            border-color: $--input-number-border-color-disabled;
          }
        }
        &:active {
          color: $--input-number-border-color-disabled;
          border-color: $--input-number-border-color-disabled;
          background-color: $--input-number-bg-color;
        }
      }
      .hover-increase {
        border-color: $--input-number-border-color-disabled;
      }
    }
  }
  @include m(small) {
    width: 100px;
    line-height: #{$--input-number-small-height - 2};

    @include e((increase, decrease)) {
      width: $--input-number-small-height;
      font-size: $--input-number-font-size;

      [class*="el-icon"] {
        transform: scale(0.9);
      }
    }

    .el-input__inner {
      padding-left: #{$--input-number-small-height + 7};
      padding-right: #{$--input-number-small-height + 7};
    }
  }

  @include when(without-controls) {
    .el-input__inner {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  @include when(controls-right) {
    .el-input__inner {
      padding-left: 15px;
      padding-right: #{$--input-number-height + 10};
    }

    @include e((increase, decrease)) {
      height: auto;
      line-height: #{($--input-number-height - 2) / 2};
    }

    @include e(increase) {
      border-radius: 0 $--input-number-border-radius 0 0;
      border-bottom: $--input-number-border;
      i {
        transform: scale(0.84);
      }
    }

    @include e(decrease) {
      right: 1px;
      bottom: 1px;
      top: auto;
      left: auto;
      border-right: none;
      border-left: $--input-number-border;
      border-radius: 0 0 $--input-number-border-radius 0;
      i {
        transform: scale(0.84) translateY(.5px);
      }
    }

    &[class*="small"] {
      [class*="increase"],
      [class*="decrease"] {
        line-height: #{($--input-number-small-height - 2) / 2};
      }
    }
  }
}