.quantity__input {
    display: block;
    width: 100%;
    max-width: 3rem;
    padding: calc(0.5rem - 1px) calc(1rem - 1px);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: center;
    color: #736F66;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    -moz-appearance: textfield;
    appearance: textfield;
}
.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: #000;
    background: #EBEAE8;
    border-radius: var(--border-radius-sm);
    transition: all .2s;
}

.quantity__button.is-inactive {
    color: #9C9994;
    pointer-events: none;
}

@media ( hover: hover ) {
    .quantity__button:hover {
        background: var(--color-medium-light);
    }
}