.text-field{--_spinner-size: 18px;display:flex;flex-direction:column;gap:var(--spacing-xxs);font-size:var(--font-size-xs);width:100%}@media(prefers-reduced-motion:no-preference){.text-field{--_transition: color .2s ease, border .2s ease, outline .1s ease, background .2s ease}}.text-field[data-required]{--_pseudo-content: " *"}.text-field__input{display:grid;align-items:center;grid-template-columns:1fr auto}.text-field__input-field{display:block;height:var(--input-height);width:100%;grid-column:1/-1;grid-row:1;padding:var(--input-padding);font-size:var(--font-size-md);font-family:inherit;line-height:var(--input-line-height);border:var(--input-border);border-radius:var(--input-border-radius);color:var(--input-fg);background-color:var(--input-bg);outline:none;outline-offset:0;transition:var(--_transition, none)}.text-field__input-field:where([data-loading],[data-valid]){padding-right:calc(var(--_spinner-size) + var(--input-padding-x) * 2)}.text-field__input-field[data-invalid]{border-color:var(--color-error);outline:1px solid var(--color-error)}.text-field__input-field[data-focused]{border-color:var(--input-border-color--focus);outline:1px solid var(--input-border-color--focus)}.text-field__input-field[data-disabled]{color:var(--color-gray--medium);background-color:var(--color-gray--lightest)}.text-field__input-field::placeholder{color:var(--color-gray--medium)}.text-field__input-spinner,.text-field__input-icon{grid-column:2;grid-row:1;display:inline-flex;font-size:var(--_spinner-size);padding-right:var(--input-padding-x)}.text-field__input-icon{color:var(--color-primary)}.text-field__input-icon svg{width:var(--_spinner-size);height:var(--_spinner-size)}.text-field--flat{gap:var(--spacing-3xs)}.text-field--flat .field-parts__label{font-size:var(--font-size-xxs);line-height:1;color:var(--color-gray--medium)}.text-field--flat .field-parts__error{margin-top:var(--spacing-3xs)}.text-field--flat .text-field__input-field{height:auto;padding-block:0;padding-inline:0;border:none;border-radius:0;background:transparent;font-size:var(--font-size-preamble);line-height:1.4}.text-field--flat .text-field__input-field[data-focused],.text-field--flat .text-field__input-field[data-invalid]{border:none;outline:none}.text-field--flat .text-field__input-field:where([data-loading],[data-valid]){padding-right:calc(var(--_spinner-size) + var(--spacing-3xs) * 2)}.text-field--flat .text-field__input-spinner,.text-field--flat .text-field__input-icon{padding-right:0}