.#{$input-number-prefix-cls} {
  $root: #{&};
  position: relative;
  z-index: 1;
  display: inline-block;
  width: $input-number-width;
  height: $input-number-height;
  font-size: $input-number-font-size;
  background-color:#fff;
  transition: all .3s;
  vertical-align: middle;
  &#{$root}-focus{
    #{$root}-handler-wrap{
      opacity: 1;
    }
  }
  //input
  #{$root}__input{
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    line-height: 1;
    color: $input-number-color;
    text-align: left;
    border-radius: 4px;
    outline: none;
    border: 1px solid $gray-light-15;
    border-radius: 4px;
    @include input-hover();
    @include input-focus();
    @include status-disabled {
      background-color: $input-bg-disabled;
      border-color: $input-border-disabled;
      opacity: 1 !important;
    }
  }
  #{$root}-handler-wrap{
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 22px;
    background: #fff;
    border-left: 1px solid $gray-light-15;
    border-radius: 0 4px 4px 0;
    opacity: 0;
    -webkit-transition: opacity .24s linear .1s;
    transition: opacity .24s linear .1s;
      //control
    #{$root}__control {
      cursor: pointer;
      position: relative;
      display: block;
      width: 100%;
      height: 50%;
      overflow: hidden;
      color: rgba(0,0,0,0.45);
      font-weight: bold;
      line-height: 0;
      text-align: center;
      border-bottom: 1px solid $gray-light-15;
      -webkit-transition: all .1s linear;
      transition: all .1s linear;
      &:last-child{
        border-bottom: none;
      }
      i{
        position: absolute;
        width: 100%;
        top: 8px;
        font-size: 16px;
        left: 0;
      }
    }
  }

  //size
  &--lg {
    @include input-number-size($input-lg-number-width, $input-lg-number-height, $input-lg-number-font-size);
    #{$root}__input{
      padding: 0 12px;
    }
    #{$root}-handler-wrap > #{$root}__control > i{
      top: 9px;
      font-size: 19px;
    }
  }
  &--sm {
    @include input-number-size($input-sm-number-width, $input-sm-number-height, $input-sm-number-font-size);
    #{$root}__input{
      padding: 0 8px;
    }
    #{$root}-handler-wrap > #{$root}__control > i{
      top: 6px;
      font-size: 14px;
    }
  }

  //disabled
  &--disabled,
  &[disabled],
  &:disabled{
    #{$root}__control {
      cursor: $cursor-disabled;
      filter: alpha(opacity=45);
      opacity: .45;
    }
  }
}