:root{--input-color-border: var(--color-border-input);--input-color-text: var(--color-text-muted);--input-color-text-active: var(--color-text-default);--input-padding-has-icon: calc( var(--space-ui-loose) + var(--space-ui-spacious) + var(--icon-size) );--input-size-border: var(--size-border-default);--input-color-background: var(--color-background-input)}.tad-input{position:relative;box-sizing:border-box;block-size:var(--size-input);border:var(--input-size-border) solid var(--input-color-border);border-radius:var(--size-radius-ui-medium);color:var(--input-color-text);background-color:var(--input-color-background);padding-inline-end:var(--space-ui-slim);transition:border-color ease-out var(--base-motion-speed-instant);display:grid;grid-template-columns:1fr auto;gap:var(--space-ui-loose);align-items:center}.tad-input__icon{position:absolute;pointer-events:none;inset-inline-start:var(--space-ui-loose)}.tad-input__input{border:none;outline:none;border-radius:inherit;padding-inline:var(--space-ui-spacious);block-size:100%;color:inherit;background-color:transparent;font-family:var(--font-family-ui);font-size:var(--font-size-ui-input)}.tad-input__input:is(.tad-input__icon+.tad-input__input){padding-inline-start:var(--input-padding-has-icon)}.tad-input:hover{--input-color-border: var(--color-border-hover)}.tad-input:has(:focus-visible){--input-color-border: var(--input-color-background);outline:var(--size-border-active) solid var(--color-border-focus);--input-color-text: var(--input-color-text-active)}.tad-input:has([disabled]){--input-color-border: var(--color-border-disabled);--input-color-background: var(--color-background-disabled);--input-color-text: var(--color-text-muted);--ui-button-border: var(--size-border-default) solid var(--input-color-border)}.tad-input:has([pattern]:user-invalid),.tad-input--error{--input-color-border: var(--color-border-error)}.tad-input:has([pattern]:user-valid),.tad-input--success{--input-color-border: var(--color-border-success)}