@layer components.form{:host{font-size:var(--s0);--_input-padding:var(--s-1);--_label-font-floating:var(--s-1);--_label-left:calc(var(--_input-padding) + .25em);--_input-bg:var(--input-background-color,#fff);--_input-text:var(--color-text,#3f3f3e);--_input-border:var(--color-border,#cfcfcf);align-items:center;margin-bottom:.5rem;display:flex}:host-context(html[data-theme="dark"]){--_input-bg:var(--input-background-color,#1e1e1e);--_input-text:var(--color-text,#e5e5e5);--_input-border:var(--color-border,#404040)}@keyframes rainbow-focus{0%{box-shadow:0 0 0 2px #f04242}14%{box-shadow:0 0 0 2px #f48c25}28%{box-shadow:0 0 0 2px #f9e71f}42%{box-shadow:0 0 0 2px #22c322}57%{box-shadow:0 0 0 2px #306ee8}71%{box-shadow:0 0 0 2px #6226d9}85%{box-shadow:0 0 0 2px #c23cdd}to{box-shadow:0 0 0 2px #f04242}}:host(:has([slot=help])){align-items:center;display:flex}:host([hidden]){display:none!important}:host([error]){& input,& textarea,& select{border:1px solid var(--color-error);box-shadow:0 0 5px 2px var(--color-error)}}::slotted([slot=help]){flex-shrink:0;margin-inline-start:var(--s-2)}e-c{flex-direction:column;flex:1;min-width:0;display:flex;position:relative;& input,& textarea,& select{padding:var(--s-1);font-size:var(--s0);font-family:var(--font-family);border:1px solid var(--_input-border);border-radius:var(--input-border-radius,var(--border-radius));background-color:var(--_input-bg);color:var(--_input-text);height:var(--input-height,2.5rem);box-sizing:border-box;outline:none;margin:3px;transition:border .2s,box-shadow .2s;display:block;&::placeholder{color:#0000}&:hover{border:1px solid var(--color-primary)}&:focus,&:focus-visible{border:1px solid var(--color-primary);box-shadow:0 0 0 2px var(--color-primary)}:host-context(html[data-theme="rainbow"]) &:focus,:host-context(html[data-theme="rainbow"]) &:focus-visible{border:1px solid #a73cdd;box-shadow:0 0 0 2px #a73cdd}@media (prefers-reduced-motion:no-preference){:host-context(html[data-theme="rainbow"]) &:focus,:host-context(html[data-theme="rainbow"]) &:focus-visible{animation:4s linear infinite rainbow-focus}:host-context(html[data-theme="rainbow"]) &[aria-invalid=true]:focus,:host-context(html[data-theme="rainbow"]) &[aria-invalid=true]:focus-visible{animation:none}}&[aria-invalid=true]{border:1px solid var(--color-error);&:focus,&:focus-visible{border:1px solid var(--color-error);box-shadow:0 0 0 2px var(--color-error)}}}& textarea{resize:vertical}&:has(textarea) label{top:24px}& select{cursor:pointer}& label{left:var(--_label-left);background:var(--_input-bg);color:var(--_input-text);pointer-events:none;padding:0 .25em;transition:all .4s;position:absolute;top:50%;transform:translateY(-50%)}& input[required]+label:after,& textarea[required]+label:after,& select[required]+label:after{content:" *"}& input:focus+label,& input:not(:placeholder-shown)+label,& textarea:focus+label,& textarea:not(:placeholder-shown)+label{top:0;left:var(--_label-left);font-size:var(--_label-font-floating);color:var(--color-primary);transform:translateY(-50%)}& :host-context(html[data-theme="rainbow"]) input:focus+label,& :host-context(html[data-theme="rainbow"]) textarea:focus+label,& :host-context(html[data-theme="rainbow"]) select:focus+label{color:#a73cdd}& input[aria-invalid=true]+label,& textarea[aria-invalid=true]+label,& select[aria-invalid=true]+label{color:var(--color-error)}& e-error{bottom:calc(-1*var(--_label-font-floating) - .5em);left:var(--_label-left);color:var(--color-error);font-size:var(--_label-font-floating);white-space:nowrap;z-index:1;position:absolute}& e-error:empty{display:none}}}