@layer components{.c-input{--color-background-alfa:var(--alias--color-background-2);--color-background-bravo:var(--alias--color-background-3);--color-background-charlie:var(--alias--color-background-4);--c-input--padding-block:calc(var(--global--size-unit-2s) - (.5lh - .5em));--c-input--padding-inline:var(--global--size-unit-s);--c-input--border-width:var(--global--size-unit-min);--c-input--width-icon:calc(var(--c-input--padding-inline) * 2);grid-template-columns:1fr var(--c-input--width-icon);border:solid var(--c-input--border-width) transparent;border-radius:var(--global--size-unit-2s);display:grid}.c-input:where([data-type=textarea]){min-block-size:calc((var(--c-input--border-width) + var(--c-input--padding-block) * 2) + 5lh)}.c-input:where([data-type=select]) .c-input__body{padding-inline-end:var(--c-input--width-icon)}.c-input:where([data-type=button]){text-align:center}.c-input:where(:has(:focus-visible)){outline:solid var(--global--size-unit-4s) var(--alias--color-accent)}.c-input:where(:has(.c-input__body:disabled)){border-color:var(--color-background-alfa);color:var(--color-background-alfa)}.c-input:where(:not(:has(.c-input__body:disabled))){background-color:var(--color-background-alfa)}@media (any-hover:hover){.c-input:where(:not(:has(.c-input__body:disabled))):where(:hover){border-color:var(--color-background-bravo)}}.c-input:where(:not(:has(.c-input__body:disabled))):where(:not([data-type=button],[data-type=select]):active){border-color:var(--color-background-charlie)}.c-input:where(:not(:has(.c-input__body:disabled))):where(:is([data-type=button],[data-type=select]):active){background-color:var(--color-background-bravo)}.c-input:where(:not(:has(.c-input__body:disabled))):where(:has(.c-input__body:user-invalid)){color:var(--alias--color-attention-danger-1);border-color:currentColor}@media (prefers-contrast:more){.c-input{border-color:currentColor}}.c-input>:where(*){grid-row:1}.c-input__body{z-index:1;padding-block:var(--c-input--padding-block);padding-inline:var(--c-input--padding-inline);grid-column:1/-1}.c-input__body:where(.c-input__body:focus){outline-style:none}.c-input__body :where(.c-icon){vertical-align:-.125em}.c-input__icon{grid-column:2;place-self:center}}