:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: #aaa;}.ppsv-input-footer-margin-enter-from,.ppsv-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.ppsv-input-footer-margin-enter-active,.ppsv-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.ppsv-input { width: 100%; color: var(--input-input-text-color);}.ppsv-input__controller { width: 100%; display: flex; position: relative;}.ppsv-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.ppsv-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.ppsv-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size);}.ppsv-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size);}.ppsv-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.ppsv-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; font-size: inherit; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color);}.ppsv-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.ppsv-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.ppsv-input__clear-icon[ppsv-input-cover] { display: flex; margin-left: 4px;}.ppsv-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.ppsv-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.ppsv-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.ppsv-input--non-hint { padding-top: 0;}.ppsv-input--placeholder-hidden { visibility: hidden;}.ppsv-input--focus { color: var(--input-focus-color);}.ppsv-input--spread { transform: scaleX(1);}.ppsv-input--disabled { color: var(--input-disabled-color);}.ppsv-input--error { color: var(--input-error-color);}.ppsv-input--line-disabled { background: var(--input-disabled-color);}.ppsv-input--line-error { background: var(--input-error-color);}.ppsv-input--caret-error { caret-color: var(--input-error-color);}