&:has(>input:not(place-holder-shown)),&:has(>input:placeholder-shown),.input-wrapper{border-radius:1rem;position:relative;background-color:var(--primary-color-10);>input{width:100%;height:100%;padding:1.2rem calc(1.2rem + 3.8rem) 1.2rem 1.2rem;font-size:2rem;color:var(--primary-color-100);background-color:transparent;border:none;&:focus{outline:none}}&:has(>input:focus){outline:5px solid var(--primary-color-100)}>svg{color:var(--primary-color-100);position:absolute;right:1.2rem;top:50%;transform:translateY(-50%)}&:has(>input:not(:placeholder-shown):invalid),&:has(>span[aria-hidden=false]){outline:3px solid #ff4545}>span{color:red;position:absolute;left:1rem;top:0;font-size:1.2rem}}