$input-number-prefix-cls: $prefix-name + "input-number";

.#{$input-number-prefix-cls} {
    display: flex;
    width: 200px;

    input {
        border-radius: 0;
    }

    /* Firefox */
    input[type="number"] {
        -moz-appearance: textfield;
    }

    /* Chrome, Safari, Edge */
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Internet Explorer 10+ */
    input[type="number"]::-ms-inner-spin-button,
    input[type="number"]::-ms-outer-spin-button {
        -ms-appearance: none;
        margin: 0;
    }

    &-TwoSide-sub-button,
    &-TwoSide-add-button {
        width: 32px;
        height: auto;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    &-TwoSide-sub-button {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: 0;

    }

    &-TwoSide-add-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;


    }


    .#{$input-prefix-cls} {
        position: relative;

        &:hover {
            .#{$input-number-prefix-cls}-UpperLower {
                opacity: 1;
            }
        }

        .#{$input-number-prefix-cls}-UpperLower {
            width: 22px;
            display: flex;
            flex-flow: column;
            height: 100%;
            position: absolute;
            right: $btnBoderWidth;
            top: $btnBoderWidth;
            opacity: 0;
            transition: all .3s;

            .fry-btn {
                height: calc(50% - $btnBoderWidth);
                width: 12px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                padding: 0;
                width: 100%;
                border-radius: 0;
                border-right: none;
                border-top-width: 0;
                border-bottom-width: 0;
                border-left-width: 1px;

            }

            .fry-btn+.fry-btn {
                border-top-width: 1px;
            }
        }
    }




}