.root {
    --stroke: var(--venia-global-color-gray-600);

    composes: gap-x-2xs from global;
    composes: grid from global;
    composes: items-center from global;
    composes: justify-items-center from global;
    composes: text-center from global;
    grid-template-columns: 1fr 4rem 1fr;
}

.wrap {
    composes: flex from global;
    composes: items-center from global;
    composes: justify-center from global;
}

.label:not(:focus):not(:active) {
    @apply sr-only;
}

.button {
    composes: bg-white from global;
    composes: border-2 from global;
    composes: border-solid from global;
    composes: border-button from global;
    composes: h-[2rem] from global;
    composes: inline-flex from global;
    composes: items-center from global;
    composes: justify-center from global;
    composes: rounded-button from global;
    composes: w-[2rem] from global;
    stroke: rgb(var(--stroke));

    composes: disabled_cursor-not-allowed from global;
}

.button:hover {
    --stroke: rgb(var(--venia-global-color-gray-900));
    border-color: rgb(var(--stroke));
}

.button:disabled,
.button:disabled:hover {
    --stroke: rgb(var(--venia-global-color-gray-400));
    @apply border-base;
}

.button_decrement {
    composes: button;
}

.button_increment {
    composes: button;
}

.icon {
    composes: items-center from global;
    composes: inline-flex from global;
    composes: justify-center from global;
    touch-action: manipulation;
}

.input {
    composes: input from '../TextInput/textInput.module.css';

    composes: text-center from global;
}