@layer components{.input{box-sizing:border-box;border:1px solid var(--input);border-radius:var(--radius-md);background:var(--background);width:100%;height:2.25rem;font-size:.875rem;font-family:var(--font-sans);color:var(--foreground);box-shadow:var(--shadow-xs);outline:none;padding:0 .75rem;transition:border-color .15s,box-shadow .15s;&:focus{border-color:var(--ring);box-shadow:0 0 0 2px oklch(from var(--ring) l c h / .2)}&::placeholder{color:var(--muted-foreground)}&:read-only:not([type=file],:disabled){background:var(--muted);cursor:default;opacity:.7;&:focus{border-color:var(--input);box-shadow:var(--shadow-xs)}}&:disabled{background-color:var(--muted);color:var(--muted-foreground);box-shadow:none;cursor:not-allowed}&:is([aria-invalid=true],:user-invalid:is(form *):not(form[data-validate=submit]:not([data-submitted]) *)){border-color:var(--destructive);&:focus{border-color:var(--destructive);box-shadow:0 0 0 2px oklch(from var(--destructive) l c h / .2)}}&[type=file]{padding:0;font-size:.875rem;&::file-selector-button{border:none;border-right:1px solid var(--input);background:var(--muted);height:100%;color:var(--foreground);font-size:.875rem;font-weight:500;font-family:var(--font-sans);cursor:pointer;margin-right:.75rem;padding:0 .75rem;transition:background .15s;&:hover{background:var(--accent)}}}&::-webkit-search-cancel-button,&::-webkit-calendar-picker-indicator{cursor:pointer}&[data-size=xs]{height:1.75rem;padding:0 .5rem;font-size:.75rem}&[data-size=sm]{height:2rem;padding:0 .625rem;font-size:.8125rem}&[data-size=md]{height:2.25rem;padding:0 .75rem;font-size:.875rem}&[data-size=lg]{height:2.75rem;padding:0 1rem;font-size:1rem}&[data-size=xl]{height:3.25rem;padding:0 1.25rem;font-size:1.125rem}}.input-group{box-sizing:border-box;border:1px solid var(--input);border-radius:var(--radius-md);background:var(--background);width:100%;height:2.25rem;box-shadow:var(--shadow-xs);color:var(--muted-foreground);align-items:center;font-size:.875rem;transition:border-color .15s,box-shadow .15s;display:flex;&>.input{border-radius:inherit;min-width:0;height:100%;box-shadow:none;font-size:inherit;background:0 0;border:none;flex:1;&:focus{box-shadow:none}&:not(:first-child){padding-inline-start:.5rem}&:not(:last-child){padding-inline-end:.5rem}}&:has(>.input:focus){border-color:var(--ring);box-shadow:0 0 0 2px oklch(from var(--ring) l c h / .2)}&:has(>.input:is([aria-invalid=true],:user-invalid:is(form *):not(form[data-validate=submit]:not([data-submitted]) *))){border-color:var(--destructive);&:has(>.input:focus){box-shadow:0 0 0 2px oklch(from var(--destructive) l c h / .2)}}&:has(>.input:read-only:not(:disabled)){background:var(--muted);&>.input{background:0 0}&:has(>.input:focus){border-color:var(--input);box-shadow:var(--shadow-xs)}}&:has(>.input:disabled){background:var(--muted);box-shadow:none;cursor:not-allowed;&>.input{background:0 0}}&>.input-group-icon{width:1rem;height:1rem;color:var(--muted-foreground);pointer-events:none;flex-shrink:0;&:first-child{margin-inline-start:.75rem}&:last-child{margin-inline-end:.75rem}}&>.input-group-text{white-space:nowrap;color:var(--muted-foreground);user-select:none;flex-shrink:0;&:first-child{margin-inline-start:.75rem}&:last-child{margin-inline-end:.75rem}}&>.input-group-button{box-sizing:border-box;aspect-ratio:1;border-radius:var(--radius-sm);height:calc(100% - .5rem);color:var(--muted-foreground);cursor:pointer;background:0 0;border:none;flex-shrink:0;place-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-grid;& svg{width:1rem;height:1rem}& svg[hidden]{display:none}&:hover{background:var(--accent);color:var(--accent-foreground)}&:focus-visible{outline:2px solid var(--ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--muted-foreground);background:0 0}&:first-child{margin-inline-start:.25rem}&:last-child{margin-inline-end:.25rem}&+.input-group-button{margin-inline-start:.125rem}}&[data-size=xs]{height:1.75rem;font-size:.75rem}&[data-size=sm]{height:2rem;font-size:.8125rem}&[data-size=md]{height:2.25rem;font-size:.875rem}&[data-size=lg]{height:2.75rem;font-size:1rem}&[data-size=xl]{height:3.25rem;font-size:1.125rem}}textarea.input{field-sizing:content;min-height:5rem;padding-top:.5rem;padding-bottom:.5rem}.field-description{color:var(--muted-foreground);margin:.375rem 0 0;font-size:.8125rem}.field-error{color:var(--destructive);margin:.375rem 0 0;font-size:.8125rem}@media (prefers-reduced-motion:reduce){.input{transition:none}.input[type=file]::file-selector-button{transition:none}}@media (prefers-contrast:more){.input{border-width:2px}.input:disabled{border-color:var(--muted-foreground)}}@media (forced-colors:active){.input{color:buttontext;background:field;border-color:buttonborder}.input:focus{outline-offset:1px;outline:2px solid highlight}.input:disabled{opacity:1;color:graytext;border-color:graytext}.input:is([aria-invalid=true],:user-invalid:is(form *):not(form[data-validate=submit]:not([data-submitted]) *)){border-color:linktext}.field-error{color:linktext}.input-group{background:field;border-color:buttonborder;&>.input:focus{outline:none}&:has(>.input:focus){outline-offset:1px;outline:2px solid highlight}&:has(>.input:disabled){border-color:graytext}&>.input-group-button{color:buttontext}}}}