.@{css-prefix}input-number {
  display: inline-block;
  position: relative;

  .bui-input {
    .input();
    padding-right: @input-number-padding-right;
    &[type="number"] {
      -webkit-appearance: textfield;
      -moz-appearance: textfield;
      appearance: textfield;
    }
    &[type="number"]::-webkit-inner-spin-button,
    &[type="number"]::-webkit-outer-spin-button {
      -webkit-appearance: none;
    }
  }

  .bui-input-dispersion {
    padding-left: @input-number-padding-left;
    text-align: center;
  }
  .bui-input-suffix-default {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 20px;
    border-left: 1px solid @input-number-suffix-default-left-border;
    z-index: @input-number-suffix-z-index;
    &-line {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      position: absolute;
      margin: auto;
      background-color: @input-number-suffix-default-bottom-border;
      transform: translateY(50%);
    }
    .bui-control-area {
      position: absolute;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: @input-number-md-control-width;
      height: @input-number-md-control-height;
      cursor: pointer;
      border-radius: @input-number-control-border-radius;
      &-up{
       top: 1px;
      }
      &-down{
        bottom: 1px;
      }
      &.disabled {
        cursor: not-allowed;
        .bui-control-area-icon {
          fill: @input-number-suffix-disabled-color;
        }
        &:hover {
          .bui-control-area-icon {
            fill: @input-number-suffix-hover-disabled-color;
          }
        }
      }
      &-icon {
        width: @input-number-md-icon-width;
        height: @input-number-md-icon-height;
        fill: @input-number-suffix-color;
        &.up {
          transform: rotate(180deg);
        }
      }
      &-up:hover,
      &-down:hover {
        .bui-control-area-icon {
          fill: @input-number-suffix-hover-color;
        }
      }
    }
  }
  .bui-input-suffix-dispersion {
    .bui-control-area {
      position: absolute;
      top: 1px;
      width: @input-number-md-dispersion-width;
      height: @input-number-md-dispersion-height;
      text-align: center;
      line-height: 0;
      cursor: pointer;
      background: @input-addon-bg;
      z-index: @input-number-suffix-z-index;
      &.disabled {
        cursor: not-allowed;
        .bui-control-area-icon {
          fill: @input-number-dispersion-disabled-color;
        }
        &:hover {
          .bui-control-area-icon {
            fill: @input-number-dispersion-hover-disabled-color;
          }
        }
      }
      &-icon {
        width: @input-number-md-icon-width;
        height: @input-number-md-icon-height;
        fill: @input-number-dispersion-color;
        vertical-align: -16px;
        &.sub {
          font-weight: 300;
        }
      }
      &:hover {
        .bui-control-area-icon {
          fill: @input-number-dispersion-hover-color;
        }
      }
    }
    .bui-control-area-left {
      left: 1px;
      border-right: 1px solid
        @input-number-dispersion-right-border;
      border-top-left-radius: @border-radius-base - 1px;
      border-bottom-left-radius: @border-radius-base - 1px;
    }
    .bui-control-area-right {
      right: 1px;
      border-left: 1px solid
        @input-number-dispersion-left-border;
      border-top-right-radius: @border-radius-base - 1px;
      border-bottom-right-radius: @border-radius-base - 1px;
    }
  }
  &-sm,
  &-small {
    .bui-input-suffix-default {
      .bui-control-area {
        height: @input-number-sm-control-height;
        width: @input-number-sm-control-width;
      }
    }
    .bui-input {
      .input-sm();
      padding-right: @input-number-padding-right;
    }
    .bui-input-dispersion {
      padding-left: @input-number-padding-left;
      text-align: center;
    }
  }
  &-xs {
    line-height: @line-height-sm;
    font-size: @input-number-xs-font-size;
    .bui-input {
      .input-xs();
      padding-right: 13px;
    }
    .bui-input-dispersion {
      padding-left: @input-number-padding-left;
      text-align: center;
    }
    .bui-input-suffix-default {
      width: 13px;
      .bui-control-area {
        width: @input-number-xs-control-width;
        height: @input-number-xs-control-height;
      }
      .bui-control-area-icon {
        width: @input-number-xs-icon-width;
        height: @input-number-xs-icon-height;
      }
    }
    .bui-input-suffix-default,
    .bui-input-suffix-dispersion {
      .bui-control-area-icon {
        vertical-align: -4px;
      }
    }
  }
  &-error {
    .bui-input {
      .input-danger();
      &:hover:not([disabled]) {
        .input-danger-hover();
      }
      &:focus:not([disabled]),
      &:active:not([disabled]),
      &.active {
        .input-danger-active();
      }
      &-filled {
        .input-danger(@input-filled-error-bg, @input-filled-error-border);
        &:hover:not([disabled]) {
          .input-danger-hover(@input-filled-error-hover-bg, @input-filled-error-hover-border);
        }
        &:focus:not([disabled]),
        &:active:not([disabled]),
        &.active {
          .input-danger-active(@input-filled-error-bg);
        }
      }
    }
  }
  &.bui-input-number-dispersion {
    .bui-input-suffix-default {
      display: none;
    }
  }
  &-xs.bui-input-number-dispersion {
    .bui-input {
      padding-right: 24px;
      padding-left: 24px;
    }
    .bui-input-suffix-default,
    .bui-input-suffix-dispersion {
      .bui-control-area-icon {
        vertical-align: -14px;
      }
    }
    .bui-control-area-left,
    .bui-control-area-right {
      height: 24px;
      width: 24px;
    }
  }
  &-sm.bui-input-number-dispersion,
  &-small.bui-input-number-dispersion {
    .bui-input {
      padding-right: 28px;
      padding-left: 28px;
    }
    .bui-input-suffix-default,
    .bui-input-suffix-dispersion {
      .bui-control-area-icon {
        vertical-align: -14px;
      }
    }
    .bui-control-area-left,
    .bui-control-area-right {
      height: 28px;
      width: 28px;
    }
  }

  &-filled {
    .bui-input-suffix-dispersion{
      .bui-control-area{
        background-color: transparent;
        &:hover{
          background-color: @input-number-filled-dispersion-hover-bg;
        }
        &.disabled{
          &:hover{
            background-color: @input-number-filled-dispersion-disabled-hover-bg;
          }
        }
      }
    }
    .bui-input-suffix-default{
      border:unset;
      &-line{
        display: none;
      }
      .bui-control-area{
        &.disabled{
          &:hover{
            background: @input-number-filled-control-disabled-hover-bg;
          }
        }
        &:hover{
          background: @input-number-filled-control-hover-bg;
        }
        &-icon{
          fill: @input-number-filled-icon-color;
          &:hover{
            fill: @input-number-filled-hover-icon-color;
          }
        }

      }
    }

    &.@{css-prefix}input-number-disabled {
      .bui-input-filled {
        background-color: @input-number-filled-disabled-bg;
      }
      .bui-input-suffix-default {
        .bui-control-area {
          &:hover {
            background: unset;
          }
          &-icon {
            fill: @input-number-filled-disabled-icon-color;
            &:hover {
              fill: @input-number-filled-disabled-hover-icon-color;
            }
          }
        }
      }

    }
    &.@{css-prefix}input-number-error {

      .input-danger();
      .bui-input-suffix-dispersion {
        .bui-control-area {
          background-color: transparent;
          &:hover {
            background-color: @input-number-filled-dispersion-error-hover-bg;
            .bui-control-area-icon {
              fill: @input-number-filled-error-control-icon-color;
            }
          }
          &.disabled {
            .bui-control-area-icon {
              fill: @input-number-filled-disabled-icon-color;
            }
            &:hover{
              background-color: @input-number-filled-dispersion-disabled-error-hover-bg;
            }
          }
        }
      }
      .bui-input-suffix-default {
        border:unset;
        .bui-control-area {
          background-color: transparent;
          &:hover {
            .bui-control-area-icon {
              fill: @input-number-filled-error-control-icon-color;
            }
            background: @input-number-filled-error-control-hover-bg;
          }
          &.disabled {
           &:hover {
            background:unset;
            .bui-control-area-icon {
              fill: @input-number-filled-disabled-hover-icon-color;
            }
           }
          }
        }
      }
      &.@{css-prefix}input-number-disabled{
        .bui-input{
          .input-disabled(@input-filled-error-disabled-border;@input-filled-error-disabled-bg)
        }
      }
    }
  }
}
.@{css-prefix}input-number-rtl {
  direction: rtl;
  .bui-input {
    padding-left:  @input-number-padding-right;
    padding-right: 12px;
  }
  .bui-input-dispersion {
    padding-right: @input-number-padding-left;
  }
  .bui-input-suffix-default {
    right: auto;
    left: 1px;
    border-left: none;
    border-right: 1px solid @input-number-rtl-suffix-right-border;
  }
  .bui-input-suffix-dispersion {
    .bui-control-area-left {
      right: 1px;
      left: auto;
      border-right: none;
      border-left: 1px solid
        @input-number-rtl-dispersion-left-border;
      border-top-right-radius: @border-radius-base - 1px;
      border-bottom-right-radius: @border-radius-base - 1px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .bui-control-area-right {
      left: 1px;
      right: auto;
      border-left: none;
      border-right: 1px solid
        @input-number-rtl-dispersion-right-border;
      border-top-left-radius: @border-radius-base - 1px;
      border-bottom-left-radius: @border-radius-base - 1px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}