@layer components{.windy-input{--windy-input-border:var( --windy-interactive-border, var(--windy-input-border-style, solid) var(--windy-input-color-border, var(--windy-color-border)) var(--windy-input-border-width, 1px) );--windy-icon-size:var(--windy-input-icon-size, 1.65em);--windy-focus-ring-color:transparent;--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--windy-color-surface-0);--_bg:var( --windy-input-bg, var(--csstools-light-dark-toggle--0, color-mix( in srgb-linear, var(--windy-color-neutral-0) 80%, var(--windy-color-neutral-1) )) );--_padding-block:var(--windy-input-padding-block, .5em);--_padding-inline:var(--windy-input-padding-inline, 1em);color:var(--windy-input-color,var(--windy-color-neutral-5));background-color:var(--_bg);padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border-radius:var(--windy-input-radius,var(--windy-interactive-radius));border:var(--windy-input-border);font-size:var(--windy-input-font-size,var(--windy-step-0));line-height:var(--windy-input-line-height,var(--windy-leading));display:flex;align-items:center;gap:var(--windy-input-gutter,var(--windy-interactive-gutter,.5em));transition:var(--windy-interactive-transition-property,box-shadow) .1s var(--windy-timing-function)}@supports (color:color-mix(in lch,red,blue)) and (color:light-dark(red,red)){.windy-input{--_bg:var( --windy-input-bg, light-dark( color-mix( in srgb-linear, var(--windy-color-neutral-0) 80%, var(--windy-color-neutral-1) ), var(--windy-color-surface-0) ) )}}@supports not (color:light-dark(tan,tan)){.windy-input *{--csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) var(--windy-color-surface-0);--_bg:var( --windy-input-bg, var(--csstools-light-dark-toggle--0, color-mix( in srgb-linear, var(--windy-color-neutral-0) 80%, var(--windy-color-neutral-1) )) )}}.windy-input:focus-within{background-color:var(--windy-color-neutral-0)}@media(prefers-color-scheme:light){.windy-input:focus-within:where(:not([data-color-scheme=dark] *)){box-shadow:var(--windy-color-neutral-1) 0 0 0 4px,var(--windy-color-neutral-5) 0 1px 2px 0}@supports (color:rgb(from tan r g b/alpha)){.windy-input:focus-within:where(:not([data-color-scheme=dark] *)){box-shadow:0 0 0 4px rgb(from var(--windy-color-neutral-1) r g b/.5),0 1px 2px rgb(from var(--windy-color-neutral-5) r g b/.05)}}}.windy-input:focus-within:where([data-color-scheme=light] *){box-shadow:var(--windy-color-neutral-1) 0 0 0 4px,var(--windy-color-neutral-5) 0 1px 2px 0}@supports (color:rgb(from tan r g b/alpha)){.windy-input:focus-within:where([data-color-scheme=light] *){box-shadow:0 0 0 4px rgb(from var(--windy-color-neutral-1) r g b/.5),0 1px 2px rgb(from var(--windy-color-neutral-5) r g b/.05)}}.windy-input[data-size=small]{--windy-input-font-size:var(--windy-step--1)}.windy-input[data-size=large]{--windy-input-font-size:var(--windy-step-1)}.windy-input[data-pill=true]{--windy-input-radius:9999px}.windy-input[data-block=true]{display:flex}.windy-input[data-disabled=true]{background-color:transparent;opacity:.5}@supports (color:rgb(from tan r g b)){.windy-input[data-disabled=true]{background-color:rgb(from var(--windy-color-neutral-5) r g b/.05)}}.windy-input[data-invalid=true]{--_placeholder-opacity:60%;border-color:var(--windy-color-danger);color:var(--windy-color-danger)}@supports (selector(:user-invalid)){.windy-input:has(:user-invalid){--_placeholder-opacity:60%;border-color:var(--windy-color-danger);color:var(--windy-color-danger)}}.windy-input input{flex:auto}.windy-input input,.windy-input textarea{-webkit-appearance:var(--windy-input-appearance,none);-moz-appearance:var(--windy-input-appearance,none);appearance:var(--windy-input-appearance,none);border-radius:inherit;color:inherit;background-color:transparent}:is(.windy-input input,.windy-input textarea)::-moz-placeholder{color:color-mix(in oklab,currentColor var(--_placeholder-opacity,40%),transparent)}:is(.windy-input input,.windy-input textarea)::placeholder{color:color-mix(in oklab,currentColor var(--_placeholder-opacity,40%),transparent)}@supports (color:rgb(from tan r g b)){:is(.windy-input input,.windy-input textarea)::-moz-placeholder{color:rgb(from currentColor r g b/var(--_placeholder-opacity,40%))}:is(.windy-input input,.windy-input textarea)::placeholder{color:rgb(from currentColor r g b/var(--_placeholder-opacity,40%))}}.windy-input:has(.windy-icon[data-position=prefix]){padding-inline-start:calc(var(--_padding-inline) - .125em)}.windy-input:has(.windy-icon[data-position=suffix]){padding-inline-end:calc(var(--_padding-inline) - .125em)}}