.base-input{--label-scale:.8;--label-indent-y:-1.25rem;--label-indent-x:-.6875rem;--input-indent-y:.5rem;--input-indent-x:var(--label-indent-x);background-color:var(--color-lightest,#fff);background:var(--color-shade-black-10);border:1px solid var(--color-shade-black-20);border-radius:var(--borderRadius-sm,.125rem);border-radius:2rem;display:flex;font-size:var(--font-size-md,1rem);font-size:clamp(var(--font-size-xs),calc(1px + 1.6vw),var(--font-size-sm));font-size:clamp(var(--font-size-sm),calc(1px + 1.6vw),var(--font-size-md));line-height:var(--lineHeight-sm);overflow:hidden;transition:all var(--transition-fast,.15s 0s ease-in)}.base-input:focus-within{border-color:var(--color-gray-800,#454545)}.base-input[data-disabled=true]{background-color:var(--color-gray-100,#e8e8e8)}.base-input:hover{border-color:var(--color-shade-black-50)}.base-input .base-input__field{align-items:center;box-shadow:unset}.base-input .base-input__field-body{padding:.875rem .75rem .5rem}.base-input .base-input__clear{padding:.875rem}.base-input .base-input__clear .dn-icon{color:var(--color-shade-black-20);display:block;font-size:1rem}.base-input .base-input__after,.base-input .base-input__pre{background:none;padding:0;width:auto}.base-input .base-input__after .dn-icon,.base-input .base-input__pre .dn-icon{font-size:1.5rem}.base-input .base-input__pre{padding-left:.875rem}.base-input .base-input__after{padding-right:.875rem}.base-input input::-webkit-autofill{background:none;box-shadow:none!important}@media screen and (min-width:769px){.base-input .base-input__field-body{padding:.875rem 1rem .625rem}}.base-input[data-focus=true]{background:var(--color-lightest);border-color:var(--color-shade-black-50)}.base-input[data-validation=valid]{border-color:var(--color-highlight-success)}.base-input[data-validation=invalid]{border-color:var(--color-highlight-error)}.base-input__field{box-shadow:var(--boxShadow-inset,inset 1px 1px 4px rgba(0,0,0,.12));display:flex;position:relative;width:100%}.base-input__field-body{padding:var(--spacing-sm,.625rem) var(--spacing-sm,.625rem);width:100%}.base-input__field-body input,.base-input__field-body textarea{background:none;border:none;font-size:inherit;height:auto;margin:0;outline:none;padding:0;resize:none;transition:all var(--transition-fast,.15s 0s ease-in);width:100%}.base-input__field-body input::-moz-placeholder,.base-input__field-body textarea::-moz-placeholder{color:var(--color-gray-500,#a5a5a5)}.base-input__field-body input::placeholder,.base-input__field-body textarea::placeholder{color:var(--color-gray-500,#a5a5a5)}.base-input__field-body input{line-height:1}.base-input__field-aside{align-items:center;display:flex;padding-right:var(--spacing-md,1rem)}.base-input__label{color:var(--color-gray-500,#a5a5a5);font-size:var(--font-size-md,1rem);height:1em;left:var(--spacing-lg,1.3125rem);line-height:1;max-width:100%;pointer-events:none;position:absolute;top:var(--spacing-md,1rem);top:50%;transform:translateY(-50%);transform-origin:0 50%;transition:all var(--transition--timing-fast,.15s) linear}.base-input__clear{background:transparent;border:none;cursor:pointer;display:block;line-height:1;margin:0;padding:0}.base-input__after,.base-input__pre{align-items:center;background:var(--color-gray-100,#e8e8e8);display:flex;flex:0 0 auto;justify-content:center}.base-input__after,.base-input__pre{width:3.5rem}.base-input--has-floating-label .base-input__field-body{padding:var(--spacing-md,1rem) var(--spacing-lg,1.3125rem)}.base-input--has-floating-label[data-floating=true] input{font-size:inherit;transform:translate(var(--input-indent-x,-.5rem),var(--input-indent-y,.5rem))}.base-input--has-floating-label[data-floating=true] input+.base-input__label,.base-input--has-floating-label[data-floating=true] input+.dn-textarea__label{transform:translate(var(--label-indent-x,-.5rem),var(--label-indent-y,-1.25rem)) scale(var(--label-scale,.8))}.base-input--has-floating-label .base-input input:-webkit-autofill{font-size:inherit;transform:translate(var(--input-indent-x,-.5rem),var(--input-indent-y,.5rem))}.base-input--has-floating-label .base-input input:-webkit-autofill+.base-input__label,.base-input--has-floating-label .base-input input:-webkit-autofill+.dn-textarea__label{transform:translate(var(--label-indent-x,-.5rem),var(--label-indent-y,-1.25rem)) scale(var(--label-scale,.8))}.base-input-fade-enter-active,.base-input-fade-leave-active{transition:all var(--transition-fast,.15s 0s ease-in)}.base-input-fade-enter-from,.base-input-fade-leave-to{opacity:0}