.#{$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;
}