@charset "UTF-8";
@import "./input.css";
@import "./common/var.css";

@component-namespace el {
  @b input-number {
    display: inline-block;
    width: 87px;
    position: relative;
    
    & .el-input {
      display: block;
      width: 37px;
      padding-left: calc(var(--input-height) * 0.8 + 1);
    }
    & .el-input__inner {
      appearance: none;
      text-align: center;
      border-color: #b8b8b8;
      padding: 0;
      &:hover {
        border-color: #b8b8b8;
      }
      &:focus {
        border-color: var(--color-blue);
        box-shadow: none;
      }
    }
    @e increase, decrease {
      height: auto;
      border: var(--border-base);
      width: calc(var(--input-height) * 0.8);
      line-height: calc(var(--input-height) - 2);
      text-align: center;
      color: #666;
      background-color: var(--disabled-fill-base);
      font-weight: normal;
      font-size: 12px;
      cursor: pointer;
      position: absolute;
      z-index: 1;

      /* &:hover {
        color: var(--color-primary);

        &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
          border-color: var(--input-focus-border);
        }
      } */

      @when disabled {
        color: var(--disabled-border-base);
        cursor: not-allowed;
      }
    }

    @e increase {
      right: 0;
      border-left: none;
    }
    @e decrease {
      left: 0;
      border-right: none;
    }

    @when disabled {
      & .el-input-number__increase, .el-input-number__decrease {
        border-color: var(--disabled-border-base);
        color: var(--disabled-border-base);
        background-color: var(--disabled-fill-base);

        &:hover {
          color: var(--disabled-color-base);
          background-color: var(--disabled-fill-base);
          border-color: var(--disabled-border-base);
          cursor: not-allowed;
        }
      }
    }
    @m large {
      width: 107px;

      & .el-input-number__increase, .el-input-number__decrease {
        line-height: calc(var(--input-large-height) - 2);
        width: calc(var(--input-large-height) * 0.8);
        font-size: var(--input-large-font-size);
      }
      & .el-input-number__decrease {
        left: 0;
      }
      & .el-input {
        display: block;
        width: 47px;
        padding-left: calc(var(--input-large-height) * 0.8 + 1);
      }
    }
    @m small {
      width: 70px;

      & .el-input-number__increase, .el-input-number__decrease {
        line-height: calc(var(--input-small-height) - 2);
        width: calc(var(--input-small-height) * 0.8);
        font-size: var(--input-small-font-size);
      }
      & .el-input-number__decrease {
        left: 0;
      }
      & .el-input {
        display: block;
        width: 30px;
        padding-left: calc(var(--input-small-height) * 0.8 + 1);
      }
    }
    @when without-controls {
      & .el-input__inner {
        padding-right: 10px;
      }
    }
  }
}