@layer utilities{[data-ui=input],[data-ui=input-wrapper]{--icon-size:16px;--inline-padding:var(--spacing-10);--surface-low:var(--color-surface-container-low);border:1px solid var(--color-surface-container-highest);border-radius:var(--radius-md);background-color:var(--color-surface-container-lowest);width:100%;height:36px;box-shadow:0 1px 2px 0 color-mix(in srgb, currentcolor 3%, transparent);color:var(--color-on-surface);font:var(--font-body-md);transition:background-color var(--transition-expressive-fast-effects), border-color var(--transition-expressive-fast-effects), box-shadow var(--transition-expressive-fast-effects), color var(--transition-expressive-fast-effects);outline:0;position:relative}:is([data-ui=input],[data-ui=input-wrapper])::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent);transition:color var(--transition-expressive-fast-effects)}:is([data-ui=input],[data-ui=input-wrapper]):focus-within{border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in oklab, var(--color-primary) 35%, transparent)}@media (hover:hover) and (pointer:fine){:is([data-ui=input],[data-ui=input-wrapper]):hover:not(:focus-within,:disabled){background-color:var(--surface-low)}:is([data-ui=input],[data-ui=input-wrapper]):hover:not(:focus-within,:disabled)::placeholder{color:var(--color-on-surface-variant)}}:is([data-ui=input],[data-ui=input-wrapper]):disabled{background-color:var(--surface-low);color:color-mix(in oklab, currentcolor 50%, transparent);box-shadow:none;border-color:#0000}:is([data-ui=input],[data-ui=input-wrapper]):has(input:disabled){background-color:var(--surface-low);color:color-mix(in oklab, currentcolor 50%, transparent);box-shadow:none;border-color:#0000}:is([data-ui=input],[data-ui=input-wrapper])[data-invalid]{border-color:var(--color-error)}:is([data-ui=input],[data-ui=input-wrapper])[data-invalid]:focus-within{box-shadow:0 0 0 2px color-mix(in oklab, var(--color-error) 35%, transparent)}[data-ui=input]{padding-inline:var(--inline-padding)}}