.dropdown-container{width:100%;display:flex;flex-direction:column;gap:12px;position:relative;.dropdown-label{color:var(--color-zink-950);font-size:clamp(1rem,.5rem + 1.4cqw,1.5rem);font-weight:500;line-height:2}.dropdown-wrapper{position:relative;width:100%;.dropdown-select{width:100%;padding:16px 48px 16px 16px;border:1px solid black;font-size:clamp(1rem,.5rem + 1.4cqw,1.5rem);font-weight:400;color:var(--color-gray-500);cursor:pointer;appearance:none;transition:all .2s ease-in-out;&:focus{border-color:blue;box-shadow:0 0 5px blue;outline:none}&:invalid~.error{display:block}&:valid{border-color:green;box-shadow:0 0 5px green;&~.error{display:none}}}.dropdown-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(0deg);pointer-events:none;color:var(--color-gray-500);font-size:1.5rem;transition:transform .3s ease;&.rotate{transform:translateY(-50%) rotate(180deg)}}}}.input-group{display:flex;flex-direction:column;gap:.75rem;position:relative;width:100%;.input-label{color:var(--color-zink-950);font-size:clamp(1rem,.5rem + 1.4cqw,1.5rem);font-weight:500;line-height:2}.input-box{width:100%;padding:.65rem 1rem;border:1px solid black;font-size:clamp(1rem,.5rem + 1.4cqw,1.5rem);font-weight:400;color:#000;line-height:2;transition:all .2s ease-in-out;&::placeholder{color:#6b7280;font-size:clamp(1rem,.5rem + 1.4cqw,1.5rem);font-weight:400}&.invalid{border-color:red;box-shadow:0 0 5px red}&:focus{outline-color:blue;box-shadow:0 0 5px blue}&:focus.invalid{border-color:red;box-shadow:0 0 5px red}}.border-none{border-right:none}.error{color:red;font-size:.875rem;margin-top:.25rem}}.input-box,.textarea-box{&:focus{outline-color:blue;box-shadow:0 0 5px blue}&:invalid:not(:focus):not(:placeholder-shown){border-color:red;box-shadow:0 0 5px red}&:invalid:not(:placeholder-shown)~.error{display:block}&:valid{border-color:green;box-shadow:0 0 5px green;&~.error{display:none}}}