/*<div class="form-number">
    <button class="form-number__btn form-number__btn-minus">
        <svg class="icon icon-minus form-number__btn-icon">
            <use xlink:href="static/svg/svg-sprite.svg#icon-minus" />
        </svg>
    </button>
    <input min="0" value="1" max="100" type="number" class="form-number__input">
    <button class="form-number__btn form-number__btn-plus">
        <svg class="icon icon-plus form-number__btn-icon">
            <use xlink:href="static/svg/svg-sprite.svg#icon-plus" />
        </svg>
    </button>
</div>*/

.form-number {
    display: inline-flex;
    border-radius: 1.4rem;
    border: 1px solid $borderGray;

    &__input {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
        width: 2.6rem;
        text-align: center;

        border: none;
        padding: 0 0.25rem;
        line-height: 2.3rem;
        background: none;
        font-size: 0.85rem;
        font-weight: 600;
        font-family: $baseFont;
        color: $baseFontColor;

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }
    }

    &__btn {
        font-family: $headingFont;
        font-weight: 500;
        font-size: 1.1rem;
        display: inline-block;
        background: none;
        color: $baseFontColor;
        padding: 0.5rem 0;
        line-height: 1.2;
        white-space: nowrap;
        transition: background-color $transitionSpeedTiming,
            border-color $transitionSpeedTiming,
            color $transitionSpeedTiming;
        border: none;
        min-width: 1.8rem;
        text-align: center;
        color: $green;

        &--disabled {
            color: $borderGray;
        }
    }

    &__btn-minus {
        padding-left: 0.9rem;
    }

    &__btn-plus {
        padding-right: 0.9rem;
    }

    &__btn-icon, .icon {
        width: 1.2rem;
        height: 1.2rem;
    }
}