.#{$ns}Number {
  margin: 0;
  padding: 0;
  line-height: $Form-input-height;
  font-size: $Form-input-fontSize;
  height: $Form-input-height;
  display: inline-block;
  vertical-align: middle;
  background-color: $Number-bg;
  border: $Number-borderWidth solid $Number-borderColor;
  border-radius: $Number-borderRadius;

  &-focused {
    border-color: $Form-input-onFocused-borderColor;
    box-shadow: $Form-input-boxShadow;
  }

  &-handler {
    text-align: center;
    overflow: hidden;
    display: block;
    touch-action: none;

    &-active {
      background: #ddd;
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
    user-select: none;
    -webkit-user-select: none;
    display: inline-block;
  }

  &:hover {
    border-color: $Form-input-onFocused-borderColor;

    .#{$ns}Number-handler-up,
    .#{$ns}Number-handler-wrap {
      border-color: $Form-input-onFocused-borderColor;
    }
  }

  &-disabled:hover {
    border-color: $Form-input-borderColor;

    .#{$ns}Number-handler-up,
    .#{$ns}Number-handler-wrap {
      border-color: $Form-input-borderColor;
    }
  }

  &-input-wrap {
    overflow: hidden;
    height: 100%;
  }

  &-input {
    width: 100%;
    background-color: transparent;
    text-align: left;
    vertical-align: top;
    outline: 0;
    -moz-appearance: textfield;
    line-height: $Form-input-height - $Number-borderWidth * 2;
    height: 100%;
    transition: all 0.3s ease;
    border: 0;
    border-radius: $Form-input-borderRadius;
    padding: 0 $Form-input-paddingX;
  }

  &-handler {
    background-color: $Number-handler-bg;
    color: $Number-handler-color;
    font-family: $Number-handler-fontFamily;
    font-size: $Number-handler-fontSize;

    &:hover {
      background-color: $Number-handler-onHover-bg;
      color: $Number-handler-onHover-color;
    }

    &:hover:active {
      background-color: $Number-handler-onActive-bg;
    }
  }

  &-handler-up {
    &-inner {
      transform: $Number-handler--up-transform;

      &:after {
        content: $Number-handler--up-content;
      }
    }
  }

  &-handler-down {
    &-inner {
      &:after {
        content: $Number-handler--down-content;
      }
    }
  }

  // @if $Number-handler-mode==vertical {
  &-handler-wrap {
    float: right;
    border-left: px2rem(1px) solid $Form-input-borderColor;
    width: $Number-handler-width;
    height: 100%;
  }

  &-handler {
    line-height: ($Form-input-height - px2rem(6px)) / 2;
    height: ($Form-input-height - $Number-borderWidth * 2) / 2;
  }

  &-handler-up {
    border-bottom: $Number-handler-borderBottom;
    padding-top: px2rem(1px);
  }

  // } @else {
  //     position: relative;

  //     &-input {
  //         text-align: center;
  //     }

  //     &-handler-up,
  //     &-handler-down {
  //         position: absolute;
  //         width: $Number-handler-width;
  //         height: 100%;
  //         top: 0;
  //     }

  //     &-handler-down {
  //         left: 0;
  //     }

  //     &-handler-up {
  //         right: 0;
  //     }
  // }

  &-handler-down-disabled,
  &-handler-up-disabled {
    background-color: $Number-handler-onDisabled-bg;
    pointer-events: none;
    color: $Number-handler-onDisabled-color;
  }

  &-disabled {
    .#{$ns}Number-input {
      opacity: 0.72;
      cursor: not-allowed;
      background-color: $Number-onDisabled-bg;
    }

    .#{$ns}Number-handler {
      opacity: 0.72;

      &:hover {
        color: $text--muted-color;
        border-color: $Form-input-borderColor;
      }
    }
  }
}

.#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number {
  display: block;
}