@import '../../common/style/common.less';

.hanzo-counter {
    font-size: 0;
    display  : flex;

    &__pre &__plus {
        background: #0C9DFF;
    }

    &__pre &__minus {
        border: 1px solid #0C9DFF;
    }

    &__pre &__minus {
        &::before {
            background-color: #0C9DFF;
        }
    }

    &__minus,
    &__plus {
        width         : 37px;
        height        : 37px;
        box-sizing    : border-box;
        border        : 0;
        margin        : 1px;
        position      : relative;
        padding       : 5px;
        vertical-align: middle;

        &::before {
            width : 12px;
            height: 2px;
        }

        &::after {
            width : 2px;
            height: 12px;
        }

        &::before,
        &::after {
            content : '';
            position: absolute;
            margin  : auto;
            top     : 0;
            left    : 0;
            right   : 0;
            bottom  : 0;
        }

        &--disabled {
            background-color: @stepper-button-disabled-color;

            &::before,
            &::after {
                background-color: @gray;
            }
        }

    }

    &__minus {
        border-radius   : 50%;
        background-color: #fff;
        border          : 1px solid red;

        &::before {
            background-color: red;
        }

        &::after {
            display: none;
        }
    }

    &__plus {
        border-radius   : 50%;
        background-color: red;

        &::before,
        &::after {
            content         : '';
            position        : absolute;
            margin          : auto;
            top             : 0;
            left            : 0;
            right           : 0;
            bottom          : 0;
            background-color: #fff;
        }
    }

    &__input {
        flex              : 1;
        width             : 30px;
        padding           : 1px;
        border            : 0;
        margin            : 1px;
        border-width      : 1px 0;
        border-radius     : 0;
        box-sizing        : content-box;
        color             : @text-color;
        font-size         : 14px;
        vertical-align    : middle;
        text-align        : center;
        -webkit-appearance: none;

        &[disabled] {
            color           : @gray;
            background-color: @stepper-input-disabled-color;
        }
    }

    &__text_big{
        flex              : 1;
        width             : 30px;
        height: 40px;
        color: #333;
        font-size: 24px;
        line-height: 40px;
        text-align: center;
        padding-top: 2px;
    }
    &__text_small{
        flex              : 1;
        width             : 30px;
        height: 20px;
        color: #333;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        padding-top: 2px;
    }

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

.hanzo-counter__small {
    .hanzo-counter__minus,
    .hanzo-counter__plus {
        width : 22px;
        height: 22px;

        &::before {
            width : 9px;
            height: 1px;
        }

        &::after {
            width : 1px;
            height: 9px;
        }
    }
}