@input-number-prefix-cls: ~"@{css-prefix}input-number";

.handler-disabled() {
    opacity: 0.72;
    color: #ccc !important;
    cursor: @cursor-disabled;
}

.@{input-number-prefix-cls} {
    @radius-wrap: 0 @btn-border-radius @btn-border-radius 0;

    .input;
    margin: 0;
    padding: 0;
    width: 80px;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    border: 1px solid @border-color-base;
    border-radius: @btn-border-radius;
    overflow: hidden;

    &-handler-wrap {
        width: 22px;
        height: 100%;
        border-left: 1px solid @border-color-base;
        border-radius: @radius-wrap;
        background: #fff;
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
        .transition(opacity @transition-time @ease-in-out);
    }

    &:hover &-handler-wrap {
        opacity: 1;
    }

    &-handler-up {
        cursor: pointer;
        &-inner {
            top: 1px;
        }
    }

    &-handler-down {
        border-top: 1px solid @border-color-base;
        top: -1px;
        cursor: pointer;
    }

    &-handler {
        display: block;
        width: 100%;
        height: 14px;
        line-height: 0;
        text-align: center;
        overflow: hidden;
        color: #999;
        position: relative;

        &:hover &-up-inner,
        &:hover &-down-inner {
            color: tint(@primary-color, 20%);
        }
    }

    &-handler-up-inner,
    &-handler-down-inner {
        width: 12px;
        height: 12px;
        line-height: 12px;
        font-size: 14px;
        color: #999;
        user-select: none;
        position: absolute;
        right: 4px;
        .transition(all @transition-time linear);
    }

    &:hover {
        .hover();
    }

    &-focused {
        .active();
    }

    &-disabled {
        .disabled();
    }

    &-input-wrap {
        overflow: hidden;
        height: 28px;
    }

    &-input {
        width: 100%;
        height: 28px;
        line-height: 28px;
        padding: 0 7px;
        text-align: left;
        outline: 0;
        -moz-appearance: textfield;
        color: #666;
        border: 0;
        border-radius: @btn-border-radius;
        .transition(all @transition-time linear);

        &[disabled] {
            .disabled();
        }
    }

    &-large {
        padding: 0;
        .@{input-number-prefix-cls}-input-wrap {
            height: 32px;
        }
        .@{input-number-prefix-cls}-handler {
            height: 16px;
        }

        input {
            height: 32px;
            line-height: 32px;
        }

        .@{input-number-prefix-cls}-handler-up-inner {
            top: 2px;
        }
        .@{input-number-prefix-cls}-handler-down-inner {
            bottom: 2px;
        }
    }

    &-small {
        padding: 0;
        .@{input-number-prefix-cls}-input-wrap {
            height: 22px;
        }
        .@{input-number-prefix-cls}-handler {
            height: 11px;
        }

        input {
            height: 22px;
            line-height: 22px;
            margin-top: -1px;
            vertical-align: top;
        }
        .@{input-number-prefix-cls}-handler-up-inner {
            top: -1px;
        }
        .@{input-number-prefix-cls}-handler-down-inner {
            bottom: -1px;
        }
    }



    &-handler-down-disabled,
    &-handler-up-disabled,
    &-disabled {
        .@{input-number-prefix-cls}-handler-down-inner,
        .@{input-number-prefix-cls}-handler-up-inner {
            .handler-disabled();
        }
    }

    &-disabled {
        .@{input-number-prefix-cls}-input {
            opacity: 0.72;
            cursor: @cursor-disabled;
            background-color: #f3f3f3;
        }
        .@{input-number-prefix-cls}-handler-wrap {
            display: none;
        }
        .@{input-number-prefix-cls}-handler {
            .handler-disabled();
        }
    }
}