.cpx-counter {
    display: flex;
    align-items: center;
    gap: 1px;
}

.cpx-counter__btn,
.cpx-counter__value {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cpx-grey-2);
    border-radius: 4px;
    background-color: var(--cpx-white-1);
    color: var(--cpx-text);
}

.cpx-counter__btn {
    width: 29px;
    box-shadow: 0 1px 1px rgba(68, 68, 70, 0.18);
    cursor: pointer;
}

.cpx-counter__value {
    width: 35px;
    min-width: 0;
    font: inherit;
    text-align: center;
}

.cpx-counter__btn:disabled {
    cursor: default;
    opacity: 0.45;
}

.wa-quantity-cart-section .cpx-counter.cpx-counter--webasyst {
    justify-content: center;

    > .wa-field-wrapper {
        margin: 0;
        background: transparent;
    }

    :is(.cpx-counter__btn, .cpx-counter__value) {
        min-width: 0;
        min-height: calc(1lh + 2px);
        margin: 0;
        padding: 0;
        border: 1px solid var(--cpx-grey-2);
        background: var(--cpx-white-1);
        font: inherit;
        color: var(--cpx-text);
    }

    .cpx-counter__btn {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:hover {
            border-color: var(--cpx-grey-2);
            background: var(--cpx-white-1);
            color: var(--cpx-text);
        }

        &::after {
            display: none;
        }

        .wa-icon-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 12px;
            height: 12px;
        }

        &:is(.is-locked, .is-near-limit) .wa-icon-wrapper {
            display: flex;
        }

        :is(.wa-icon, svg) {
            display: block;
        }
    }

    .cpx-counter__value {
        width: 35px;
        text-align: center;

        &:disabled {
            opacity: 0.45;
            cursor: default;
        }

        &.wa-error-field {
            border-color: var(--cpx-red) !important;
        }
    }

    .wa-unit,
    .wa-description {
        display: none !important;
    }

    @media (width <= 1200px) {
        gap: 4px;

        :is(.cpx-counter__btn, .cpx-counter__value) {
            height: 32px;
            min-height: 32px;
        }

        .cpx-counter__btn {
            width: 32px;
        }

        .cpx-counter__value {
            width: 40px;
        }
    }
}