.u-input{--line-height:1.2;align-items:center;display:inline-flex;position:relative}.u-input input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-color);border:none;border-radius:var(--u-rounded);color:var(--text-color);font-size:var(--font-size);line-height:var(--line-height);padding:var(--gap-v) var(--gap-h);resize:none;transition-duration:.2s;transition-property:background-color,opacity;transition-timing-function:var(--u-ease-in);width:100%}.u-input input::-moz-placeholder{color:var(--color-a500);text-transform:uppercase}.u-input input::placeholder{color:var(--color-a500);text-transform:uppercase}.u-input input:is(:disabled,[disabled]){cursor:not-allowed;opacity:.75}.u-input input:focus{outline:none}@media (hover){.u-input input:is(:not(:disabled,[disabled])):hover{background-color:var(--background-color-hover,var(--background-color))!important}}.u-input input[type=file]::file-selector-button{margin-inline-end:var(--u-gap-sm)}@supports not (margin-inline-end:0){.u-input input[type=file]::file-selector-button{margin-right:var(--u-gap-sm)}}.u-input input[type=file]::file-selector-button{background-color:transparent;border:0;color:var(--color-a500);cursor:pointer;font-family:inherit;font-weight:500;outline:none;padding:0}.u-input input.leading{padding-inline-start:calc(var(--gap-h)*2 + var(--font-size)*var(--line-height))}@supports not (padding-inline-start:0){.u-input input.leading{padding-left:calc(var(--gap-h)*2 + var(--font-size)*var(--line-height))}}.u-input input.trailing{padding-inline-end:calc(var(--gap-h)*2 + var(--font-size)*var(--line-height))}@supports not (padding-inline-end:0){.u-input input.trailing{padding-right:calc(var(--gap-h)*2 + var(--font-size)*var(--line-height))}}.u-input input.rounded{border-radius:var(--u-rounded-full)}.u-input input.highlight{animation:shake .4s var(--u-bounce)}.u-input .u-input__slot{display:flex;position:absolute}.u-input .u-input__slot.leading{inset-inline-start:var(--gap-h)}@supports not (inset-inline-start:0){.u-input .u-input__slot.leading{left:var(--gap-h)}}.u-input .u-input__slot.trailing{inset-inline-end:var(--gap-h)}@supports not (inset-inline-end:0){.u-input .u-input__slot.trailing{right:var(--gap-h)}}.u-input .u-input__slot .u-icon{color:var(--text-color);height:calc(var(--font-size)*var(--line-height));width:calc(var(--font-size)*var(--line-height))}.u-input.xs{--gap-h:6px;--gap-v:4px;-moz-column-gap:3px;column-gap:3px;--font-size:12px}.u-input.sm{--gap-h:9px;--gap-v:6px;-moz-column-gap:4px;column-gap:4px;--font-size:14px}.u-input.md{--gap-h:12px;--gap-v:8px;-moz-column-gap:6px;column-gap:6px;--font-size:16px}.u-input.lg{--gap-h:15px;--gap-v:10px;-moz-column-gap:8px;column-gap:8px;--font-size:19px}.u-input.xl{--gap-h:18px;--gap-v:13px;-moz-column-gap:10px;column-gap:10px;--font-size:24px}.u-input.neutral{--text-color:var(--color-900)}.u-input.color{--text-color:var(--color-500)}.u-input.solid{--background-color:var(--neutral-50)}.u-input.solid input.highlight,.u-input.solid input:focus-visible{box-shadow:inset 0 -1px 0 var(--text-color)}.u-input.ghost,.u-input.outline{--background-color:transparent}.u-input.outline input{box-shadow:inset 0 var(--border-width,-1px) 0 var(--text-color)}.u-input.outline:focus-within{--border-width:-2px}.u-input.ghost{--background-color-hover:var(--color-a300)}.u-input.ghost input.highlight,.u-input.ghost input:focus-visible{background-color:var(--background-color-hover)}