.input-value{width:100%;display:flex;align-items:center}.input-value.type-color:before{content:"";height:60%;aspect-ratio:1;display:flex;place-items:center;border-radius:100%;background:var(--color, transparent)}.combo-field{--pad-lr: 2rem;position:relative;height:max(6em,5.2rem);border-radius:1.2rem;border:2px solid transparent;background:light-dark(var(--clr-metal-50),var(--clr-metal-900));cursor:text;padding-inline:var(--pad-lr);overflow:visible;display:grid;grid-template-columns:1fr;grid-template-areas:"label" "input";gap:0 1rem;transition:border-color .2s ease}.combo-field:has(textarea){height:auto;padding:var(--pad-lr)}.combo-field>label{position:absolute;height:min-content;inset:50% 0 0 var(--pad-lr);transform:translateY(-50%);font-size:max(1.8em,1.5rem);font-weight:400;color:var(--clr-metal-500);pointer-events:none;-webkit-user-select:none;user-select:none;transition:top .2s ease,scale .2s ease,transform .2s ease;transform-origin:left top}.combo-field>button,.combo-field>div:has(.icon),.combo-field>div:is(.append){--icon-size: 2em;grid-area:icon;display:grid;place-items:center;width:calc(var(--icon-size) + calc(var(--pad-lr) * 2));height:100%;cursor:pointer;color:var(--clr-metal-400);border-radius:0 1.2rem 1.2rem 0}.combo-field>button:hover,.combo-field>div:has(.icon):hover,.combo-field>div:is(.append):hover{background:var(--clr-metal-100)}.combo-field>button .icon,.combo-field>div:has(.icon) .icon,.combo-field>div:is(.append) .icon{--width: var(--icon-size)}.combo-field div.append{padding:0 2em;width:auto}.combo-field div.append:hover{background:none}.combo-field div.append button{color:var(--clr-metal-400)}.combo-field>div:has(.icon){--icon-size: 2rem;cursor:inherit}.combo-field>div:has(.icon):hover{background:inherit}.combo-field>input,.combo-field>.input-value,.combo-field textarea{grid-area:input;font-size:max(1.8em,1.5rem);font-weight:400;color:light-dark(var(--clr-metal-950),var(--clr-white))}.combo-field>input.is-placeholder,.combo-field>input::placeholder,.combo-field>.input-value.is-placeholder,.combo-field>.input-value::placeholder,.combo-field textarea.is-placeholder,.combo-field textarea::placeholder{color:var(--clr-metal-500)}.combo-field textarea{width:100%;height:100%;min-height:20rem;resize:vertical}.combo-field .select-menu-container.v-enter-from .select-menu,.combo-field .select-menu-container.v-leave-to .select-menu{opacity:0}.combo-field .select-menu-container.v-leave-to .select-menu{scale:1 .8}.combo-field .select-menu-container.v-enter-active .select-menu,.combo-field .select-menu-container.v-leave-active .select-menu{transition:opacity .2s ease,transform .2s ease-out,scale .2s ease-in}.combo-field .select-menu-container .select-menu{position:absolute}.combo-field.dropdown-mode{cursor:pointer;-webkit-tap-highlight-color:transparent}.combo-field:has(>div>.icon),.combo-field:has(>.append),.combo-field:has(>button){grid-template-columns:1fr auto;grid-template-areas:". icon" "input icon";padding-right:0}.combo-field:not(:has(>label)){grid-template-rows:0 1fr}.combo-field.dropdown-mode>button{pointer-events:none}.combo-field:focus-within:not(.dropdown-mode)>label,.combo-field.filled>label,.combo-field.focused:not(.dropdown-mode)>label{top:10%;scale:.75;transform:translateY(0)}.combo-field:focus-within,.combo-field.active{border-color:light-dark(var(--clr-metal-950),var(--clr-metal-600))}.combo-field.error{border-color:var(--clr-destructive-400)}.combo-field.success{border-color:var(--clr-green-600)}.combo-field.warning{border-color:#ffb300}.combo-field.active>.arrow{transition:transform .3s ease;transform:rotateX(180deg)}.combo-field.disabled{opacity:.4;pointer-events:none}.combo-field.theme-white,.combo-field.theme-dropdown-white{background:var(--clr-white)}.combo-field[class*=theme-dropdown]{--pad-lr: 1.6rem;border-radius:10rem;padding:0 1.6rem}.combo-field[class*=theme-dropdown]:has(.type-color){padding-right:1.6rem;gap:0}.combo-field[class*=theme-dropdown]>button{width:auto;padding:0;pointer-events:none}.combo-field[class*=theme-dropdown]>label{color:var(--clr-metal-950);padding-left:1.2rem}.combo-field[class*=theme-dropdown]>.input-value,.combo-field[class*=theme-dropdown]>.input-value::placeholder,.combo-field[class*=theme-dropdown]>input,.combo-field[class*=theme-dropdown]>input::placeholder{color:var(--clr-metal-950);--fw: 600}.combo-field[class*=theme-dropdown]>.input-value:not(.type-color),.combo-field[class*=theme-dropdown]>input:not(.type-color){padding-left:1.2rem}.combo-field[class*=theme-dropdown]:hover{border-color:var(--clr-metal-100)}.combo-field[class*=theme-dropdown]:focus-within{border-color:var(--clr-metal-950)}.combo-field[class*=theme-dropdown].active{border-color:var(--clr-metal-100)}@container field-region (width < 350px){.combo-field{--pad-lr: 1.2rem;height:5.2rem}.combo-field>.input-value,.combo-field>input,.combo-field>label{font-size:1.6rem}.combo-field>button{--icon-size: 1.6rem}}