.field-root-fSe {
}

.field-label-zVe {
    min-height: 2.125rem;
}

.field-input-2Mu {
    padding: calc(0.375rem - 1px) calc(0.625rem - 1px); /* TODO @TW: review */
}

.field-input-2Mu: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));
}

.field-optional-EDv {
}

.textInput-input-PzO {
}

.textInput-input_error-2j1 {
}

.textInput-input_shimmer-BRC {
    font-size: 1rem;
    padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
}

.fieldIcons-root-iHE {
    grid-template-areas: 'before input after';
    grid-template-columns: auto 1fr auto;
}

.fieldIcons-input-8z9 {
    grid-column: before-start / after-end;
    grid-row: input-start / input-end;
}

/* TODO @TW: cannot compose */
.fieldIcons-input-8z9 > input {
    padding-left: calc(1.875rem * var(--iconsBefore) + 0.625rem);
    padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
}

.fieldIcons-before-tPg,
.fieldIcons-after-BeR {
}

/* TODO @TW: cannot compose */
.fieldIcons-before-tPg:empty,
.fieldIcons-after-BeR:empty {
    display: none;
}

.fieldIcons-before-tPg {
    grid-area: before;
}

.fieldIcons-after-BeR {
    grid-area: after;
}

/* TODO @TW: cannot compose */
.fieldIcons-before-tPg svg {
    /* composes: stroke-gray-600 from global; */
    stroke: rgb(var(--venia-global-color-gray-600));
}

.message-root-6k6 {
}

/* TODO @TW: cannot compose */
.message-root-6k6:empty {
    display: none;
}

.message-root_error-GtK {
}

.clickable-root-sDL {
}

.linkButton-root-HUs {
}

.button-root-MFn {
    padding-top: calc(0.5rem + 1px); /* TODO @TW: review */
    padding-bottom: calc(0.5rem - 1px); /* TODO @TW: review */
    min-height: 2.5rem;
    transition-duration: 256ms;
    transition-property: background-color, border-color, color;
    transition-timing-function: var(--venia-global-anim-standard);
}

.button-root-MFn:active {
    transition-duration: 128ms;
}

/**
 * Some browsers retain the :hover state after a click, this ensures if a button becomes disabled after
 * being clicked it will be visually disabled.
 */
.button-root-MFn:hover:disabled {
    /* TODO @TW: cannot compose. This may not be possible with two variants. */
    pointer-events: none;
}

.button-root_lowPriority-Qoh {
}

.button-root_normalPriority-1E0 {
}

.button-root_highPriority-UpE {
}

.button-root_lowPriorityNegative-uax,
.button-root_normalPriorityNegative-x-d {
}

.button-root_highPriorityNegative-gwK {
}

.button-content-TD8 {
}


.errorMessage-root-uB8 {
}

.errorMessage-errorMessage-pas {
}