.root {
    composes: content-start from global;
    composes: grid from global;
    composes: text-colorDefault from global;
}

.label {
    composes: flex from global;
    composes: font-semibold from global;
    composes: items-center from global;
    composes: justify-between from global;
    composes: leading-none from global;
    composes: px-0.5 from global;
    composes: py-2.5 from global;
    composes: text-colorDefault from global;
    min-height: 2.125rem;
}

.input {
    composes: appearance-none from global;
    composes: bg-white from global;
    composes: border-2 from global;
    composes: border-solid from global;
    composes: border-input from global;
    composes: flex-textInput from global;
    composes: h-[2.5rem] from global;
    composes: inline-flex from global;
    composes: m-0 from global;
    composes: max-w-full from global;
    composes: rounded-input from global;
    composes: text-colorDefault from global;
    composes: text-colorDefault from global;
    composes: w-full from global;
    padding: calc(0.375rem - 1px) calc(0.625rem - 1px); /* TODO @TW: review */

    composes: focus_outline-none from global;
    composes: focus_shadow-inputFocus from global;
}

.input:disabled {
    background: rgb(var(--venia-global-color-gray-100));
    border-color: rgb(var(--venia-global-color-gray-400));
    color: rgb(var(--venia-global-color-gray-darker));
}

.optional {
    composes: font-normal from global;
    composes: text-sm from global;
    composes: text-subtle from global;
    composes: leading-none from global;
}