.input{border:1.5px solid var(--zinc-300);background-color:var(--surface);width:100%;color:var(--zinc-800);cursor:text;font-family:inherit;transition:border-color .15s,box-shadow .15s}@media (hover:hover) and (pointer:fine){.input:hover{border-color:var(--zinc-400)}}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);outline:none}.input-xs{font-size:var(--body-xs);border-radius:.4rem;padding:.25rem .7rem}.input-sm{font-size:var(--body-xs);border-radius:.5rem;padding:.4rem .9rem}.input-md{font-size:calc((var(--body-xs) + var(--body-sm)) / 2);border-radius:.625rem;padding:.575rem 1.2rem}.input-lg{font-size:var(--body-sm);border-radius:.75rem;padding:.75rem 1.5rem}