input::placeholder{color:var(--input-placeholder-color,color-mix(in srgb,var(--color-dark-100)50%,transparent))}input.input-focused::placeholder{color:var(--input-placeholder-focus-color,var(--color-dark-100))}.input-wrapper{isolation:isolate;position:relative;overflow:hidden}.input-wrapper:before{content:"";background-color:var(--input-hover-color,var(--color-brand-40));clip-path:inset(100% 0 0);z-index:0;pointer-events:none;transition:clip-path .5s ease-in-out;position:absolute;inset:0}.input-wrapper:hover:before{clip-path:inset(0)}.input-wrapper:has(input:focus):before{background-color:var(--input-focus-color,var(--color-brand-70));clip-path:inset(0)}.input-wrapper:not(:hover):not(:has(input:focus)):before{transition:clip-path .5s ease-in-out}.input-has-prefix:after{content:attr(data-prefix);z-index:10;pointer-events:none;color:var(--input-prefix-color,var(--color-dark-100));opacity:.5;line-height:1.5rem;position:absolute;top:.5rem;left:.25rem}.input-has-prefix:has(input:focus):after{opacity:1}.input-has-prefix:has(input:not(:placeholder-shown)):after{opacity:1}.input-has-prefix.input-has-error:after{color:var(--color-error);opacity:1}.input-wrapper>input,.input-wrapper>span{z-index:1;position:relative}