@import "../../style/index.less";
@import "../input/style/mixin.less";
@ui-prefix-inputnumber: yyui-inputnumber;
.ant-input-number{
  font-size: @font-size-normal;
  border-radius: @border-radius-base;
  .ant-input-number-input {
    border-radius: @border-radius-base;
  }
}
//表单下的数字框对齐填充宽度
form .ant-input-number{
  width: 100%;
}
.@{ui-prefix-inputnumber}{

  // 处理数字输入框前后置样式
  .ant-input-group {
    //只存在后置内容
    .ant-input-group-addon:first-child{
      border-bottom-left-radius: @border-radius-base;
      border-top-left-radius: @border-radius-base;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
    //只存在前置内容
    .ant-input-group-addon:last-child{
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      border-bottom-right-radius: @border-radius-base;
      border-top-right-radius: @border-radius-base;
    }
    .ant-input-number {
      position: relative;
      z-index: 2;
      width: 100%;
      display: table-cell;
      //存在前后置内容
      &:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
    }
  }

  //  去除input type = 'number'的浏览器默认样式
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0;
  }
  .ant-input-number-focused{
    box-shadow: none;
  }
  .ant-input-number-input[disabled]{
    background-color: @input-disabled-bg;
    opacity: 1;
    cursor: @cursor-disabled;
    color: @input-disabled-text-color;
  }
}

.active(@color: @input-hover-border-color) {
  border-color: tint(@color, 20%);
  outline: 0;
  box-shadow: 0 0 0 2px fade(@color, 20%);
}

.hover(@color: @input-hover-border-color) {
  border-color: tint(@color, 20%);
}

//---------整数框----------
.yyui-inputnumber{
  .ant-input-number-input{
    padding-right:25px;
  }
  &.text-right{
    .ant-input-number-input{
      text-align: right;
    }
  }
  &.range {
    display: inline-flex;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    overflow: hidden;
    
    & .ant-input-number-handler-up-inner {
      padding: initial;
      line-height: 13px;
    }

    & .ant-input-number-handler-down-inner {
      padding: initial;
      line-height: 13px;
    }

    & > .ant-input-number {
      margin-right: 0;
      width: auto;
    }

    &:hover{
      .hover();
    }

    &:focus {
      .active();
    }
  }
  &.range-lg {
    display: inline-flex;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    overflow: hidden;
    height: 32px;
    
    & .ant-input-number-handler-up-inner {
      padding: initial;
      line-height: 15px;
    }

    & .ant-input-number-handler-down-inner {
      padding: initial;
      line-height: 15px;
    }

    & > .ant-input-number {
      margin-right: 0;
      width: auto;
    }

    & > .separator {
      height: 32px;
      line-height: 32px;
    }

    &:hover{
      .hover();
    }

    &:focus {
      .active();
    }
  }
  &.range-sm {
    display: inline-flex;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    overflow: hidden;
    height: 22px;
    
    & .ant-input-number-handler-up-inner {
      padding: initial;
      line-height: 11px;
    }

    & .ant-input-number-handler-down-inner {
      padding: initial;
      line-height: 11px;
    }

    & > .ant-input-number {
      margin-right: 0;
      width: auto;
    }

    & > .separator {
      height: 22px;
      line-height: 22px;
    }

    &:hover{
      .hover();
    }

    &:focus {
      .active();
    }
  }
  &.separator {
    color: #999;
    display: inline-block;
    background-color: #fff;
    vertical-align: top;
    line-height: 2.4
  }
}

//---------精确数字框----------
.yyui-inputcurrency{
  .ant-input{
    padding-right:25px;
  }
  &.text-right{
    .ant-input{
      text-align: right;
    }
  }
  &.range {
    display: inline-flex;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    overflow: hidden;
    height: 28px;
    line-height: 28px;

    & > .separator {
      height: 28px;
      line-height: 28px;
    }

    &:hover{
      .hover();
    }

    &:focus {
      .active();
    }

    & > .yyui-input {
      display: inline-block;

      & .ant-input {
        border: 0;
      }
    }
  }
  &.range-lg {
    display: inline-flex;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    overflow: hidden;
    height: 32px;
    line-height: 32px;

    & > .separator {
      height: 32px;
      line-height: 32px;
    }

    &:hover{
      .hover();
    }

    &:focus {
      .active();
    }

    & > .yyui-input {
      display: inline-block;

      & .ant-input {
        border: 0;
      }
    }
  }
  &.range-sm {
    display: inline-flex;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    overflow: hidden;
    height: 22px;
    line-height: 22px;

    & > .separator {
      height: 22px;
      line-height: 22px;
    }

    &:hover{
      .hover();
    }

    &:focus {
      .active();
    }

    & > .yyui-input {
      display: inline-block;

      & .ant-input {
        border: 0;
      }
    }
  }
}