.input-field{--input-field-border:var(--color-border-subtle-dark);--input-field-background:var(--color-surface-primary);--input-field-color:inherit;--icon-start-color:var(--color-text-disabled);--icon-end-color:var(--color-text-disabled);--input-field-label-color:var(--color-text-primary-muted);--input-field-border-radius:2px;--input-field-gap:.5rem;flex-direction:column;gap:.5rem;display:inline-flex}.input-field.invalid{--input-field-color:var(--color-text-error);--input-field-underline:var(--color-surface-error);--input-field-label-color:var(--color-text-error);--input-field-status-color:var(--color-text-error)}.input-field.invalid .input-field-description{opacity:0;position:absolute}.input-field.focused .input-field-main{--input-field-border:var(--input-field-border--active)}.input-field.disabled .input-field-main{--input-field-background:var(--color-surface-disabled);--input-field-color:var(--color-text-disabled);--input-field-underline:transparent;--input-field-label-color:var(--color-text-disabled);--input-field-status-color:var(--color-text-disabled)}.input-field.size-md{--input-field-size:2.5rem;--input-field-font-size:1rem}.input-field.size-md.filled .input-field-label{opacity:0}.input-field.size-lg .input-field-main{--input-field-size:3rem;--input-field-font-size:1rem}.input-field.size-lg.filled:not(.placeholder){--input-filed-label-offset:.8125rem;--input-filed-input-offset:.875rem}.input-field.size-xl .input-field-main{--input-field-size:3.5rem;--input-field-font-size:1rem}.input-field.size-xl.filled:not(.placeholder){--input-filed-label-offset:1.0625rem;--input-filed-input-offset:1rem}.input-field.size-lg .input-field-label,.input-field.size-xl .input-field-label{transition:font-size .3s,top .3s}.input-field.size-lg.filled:not(.placeholder) .input-field-label,.input-field.size-xl.filled:not(.placeholder) .input-field-label{font-size:.6875rem}.input-field.size-lg.autofilled .input-field-label,.input-field.size-xl.autofilled .input-field-label{transition:none}.input-field.placeholder .input-field-label{opacity:0}.input-field .input-field-icon-status{--icon-end-color:var(--input-field-status-color,var(--color-text-positive))}.input-field-main{background-color:var(--input-field-background);border-radius:var(--input-field-border-radius);border:1px solid var(--input-field-border);color:var(--input-field-color);height:var(--input-field-size);align-items:center;gap:var(--input-field-gap);font-size:var(--input-field-font-size);padding:0 .75rem;transition:border-color .3s;display:inline-flex;position:relative}.input-field-main>*{flex:none}.input-field-main:after{background-color:var(--input-field-underline,transparent);content:"";border-radius:0 0 var(--input-field-border-radius) var(--input-field-border-radius);width:calc(100% + 2px);height:.125rem;transition:background-color .2s linear;position:absolute;bottom:-1px;left:-1px}.input-field-main>.ui-icon:first-child{color:var(--icon-start-color)}.input-field-main>.ui-icon:last-child{color:var(--icon-end-color)}.input-field-main:hover{--input-field-border:var(--input-field-border--hover)}.input-field-main .control-button.v-enter-active,.input-field-main .control-button.v-leave-active{transition:opacity .2s linear}.input-field-main .control-button.v-enter-from,.input-field-main .control-button.v-leave-to{opacity:0}.input-field-main .control-button:not(:last-child){margin-right:var(--input-field-gap);position:relative}.input-field-main .control-button:not(:last-child):after{content:"";background-color:var(--color-border-subtle-dark);width:1px;height:100%;right:calc(var(--input-field-gap)*-1);position:absolute}.input-field-content{flex-grow:1;flex-shrink:1;height:100%;position:relative}.input-field-content input{appearance:textfield;width:100%;height:100%;color:var(--input-field-color);padding:0;padding-top:var(--input-filed-input-offset,0);background-color:#0000;border-width:0;font-weight:600}.input-field-content input::placeholder{font-weight:400}.input-field-content input:placeholder-shown{text-overflow:ellipsis}.input-field-content input::-ms-clear{display:none}:is(.input-field-content input:-moz-submit-invalid,.input-field-content input:-moz-ui-invalid,.input-field-content input:invalid){box-shadow:none}.input-field-content input:-webkit-autofill{transition:background-color 50000s ease-in-out 50000s;animation-name:autoFillStart}.input-field-content input:not(:-webkit-autofill){animation-name:autoFillCancel}.input-field-content input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field-content input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field-content input[type=number]{-moz-appearance:textfield}.input-field-content input:focus-visible{outline:0}.input-field-label{pointer-events:none;color:var(--input-field-label-color);left:0;top:var(--input-filed-label-offset,50%);white-space:nowrap;text-overflow:ellipsis;width:100%;position:absolute;overflow:hidden;transform:translateY(-50%)}.input-field-messages{color:var(--color-text-primary-muted);font-size:.75rem;position:relative}.input-field-messages .input-field-description,.input-field-messages .input-field-error{padding:var(--input-field-messages-spacing-v) var(--input-field-messages-spacing-h) 0;display:block}.input-field-error{color:var(--color-text-error)}