.quantity {
    display: flex;
    width: 88px;
    height: 40px;
    border: 1px solid rgb(166 166 166 / 45%);

    // .quantity__button
    &__button {
        position: relative;
        flex: 0 0 30px;
        cursor: pointer;

        &::before,
        &::after {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 9px;
            height: 1px;
            margin: 0 0 0 -4.5px;
            content: '';
            background-color: #a6a6a6;
            transition: all 0.3s ease 0s;
        }

        @media (any-hover: hover) {
            &:hover {
                &::before,
                &::after {
                    background-color: rgb(0 0 0 / 50%);
                }
            }
        }

        // .quantity__button_plus
        &_plus {
            &::before {
                transform: rotate(-90deg);
            }
        }
    }

    // .quantity__input
    &__input {
        flex: 1 1 auto;

        input {
            width: 100%;
            height: 100%;
            font-size: 12px;
            color: #a6a6a6;
            text-align: center;
        }
    }
}