@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);display:block}: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)}}e-c{flex-direction:column;margin-bottom:.5rem;display:flex;position:relative;& input,& textarea,& select{padding:var(--s-1);font-size:var(--s0);font-family:var(--font-family);border:1px solid var(--color-border);border-radius:var(--border-radius);background-color:#fff;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)}&[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);color:var(--color-text);pointer-events:none;background:#fff;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%)}& 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}}}