@volverjs/style/dist/components/vv-input-text.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-input-text-display:var(--input-display);--vv-input-text-flex:var(--input-flex);--vv-input-text-flex-direction:var(--input-flex-direction);--vv-input-text-margin-bottom:var(--input-gap);--vv-input-text-font-size:var(--input-font-size);--vv-input-text-line-height:var(--input-line-height);--vv-input-text-min-width:var(--input-min-width);--vv-input-text-element-label-display:var(--input-label-display);--vv-input-text-element-label-font-size:var(--input-label-font-size);--vv-input-text-element-label-font-weight:var(--input-label-font-weight);--vv-input-text-element-label-color:var(--input-label-color);--vv-input-text-element-label-margin:0 0 var(--input-label-gap) 0;--vv-input-text-element-label-white-space:var(--input-label-white-space);--vv-input-text-element-label-text-overflow:var(--input-label-text-overflow);--vv-input-text-element-label-overflow:var(--input-label-overflow);--vv-input-text-element-label-max-width:var(--input-label-max-width);--vv-input-text-element-wrapper-position:relative;--vv-input-text-element-wrapper-display:flex;--vv-input-text-element-wrapper-align-items:center;--vv-input-text-element-wrapper-flex:1;--vv-input-text-element-wrapper-overflow:hidden;--vv-input-text-element-wrapper-background-color:var(--input-background-color);--vv-input-text-element-wrapper-will-change:background-color;--vv-input-text-element-wrapper-transition:var(--transition-colors);--vv-input-text-element-wrapper-pseudo-before-position:absolute;--vv-input-text-element-wrapper-pseudo-before-height:var(--spacing-1);--vv-input-text-element-wrapper-pseudo-before-inset:auto 0 0 0;--vv-input-text-element-wrapper-pseudo-before-background:var(--color-word-5);--vv-input-text-element-wrapper-pseudo-after-position:absolute;--vv-input-text-element-wrapper-pseudo-after-height:var(--spacing-2);--vv-input-text-element-wrapper-pseudo-after-inset:auto 0 0 0;--vv-input-text-element-wrapper-pseudo-after-background:var(--color-brand);--vv-input-text-element-wrapper-pseudo-after-scale:0 1;--vv-input-text-element-wrapper-pseudo-after-transform-origin:left;--vv-input-text-element-wrapper-pseudo-after-will-change:transform;--vv-input-text-element-wrapper-pseudo-after-transition:var(--transition-transform);--vv-input-text-element-wrapper-state-hover-background-color:var(--input-background-color-hover);--vv-input-text-element-wrapper-state-focus-within-background-color:var(--input-background-color-focus);--vv-input-text-element-wrapper-state-focus-within-pseudo-after-scale:1;--vv-input-text-element-inner-position:relative;--vv-input-text-element-inner-display:flex;--vv-input-text-element-inner-flex:1;--vv-input-text-element-inner-min-width:0;--vv-input-text-element-input-display:flex;--vv-input-text-element-input-flex:1;--vv-input-text-element-input-align-items:center;--vv-input-text-element-input-color:var(--input-color);--vv-input-text-element-input-line-height:var(--leading-normal);--vv-input-text-element-input-min-width:0;--vv-input-text-element-input-min-height:var(--input-min-height);--vv-input-text-element-input-text-overflow:var(--input-text-overflow);--vv-input-text-element-input-pseudo-placeholder-color:var(--input-placeholder-color);--vv-input-text-element-input-pseudo-calendar-picker-indicator-position:absolute;--vv-input-text-element-input-pseudo-calendar-picker-indicator-padding:var(--spacing-sm);--vv-input-text-element-input-pseudo-calendar-picker-indicator-top:0;--vv-input-text-element-input-pseudo-calendar-picker-indicator-right:0;--vv-input-text-element-input-pseudo-calendar-picker-indicator-opacity:var(--opacity-0);--vv-input-text-element-input-pseudo-search-cancel-button--webkit-appearance:none;--vv-input-text-element-input-pseudo-search-cancel-button-opacity:var(--opacity-0);--vv-input-text-element-input-pseudo-color-swatch-wrapper-padding:var(--spacing-px);--vv-input-text-element-input-pseudo-color-swatch-height:var(--spacing-20);--vv-input-text-element-input-pseudo-color-swatch-border-radius:var(--spacing-4);--vv-input-text-element-input-pseudo-color-swatch-padding:0;--vv-input-text-element-input-pseudo-outer-spin-button-display:none;--vv-input-text-element-input-pseudo-inner-spin-button-display:none;--vv-input-text-element-input-pseudo-datetime-edit-padding:0;--vv-input-text-element-input-pseudo-datetime-edit-fields-wrapper-padding:0;--vv-input-text-element-input-pseudo-datetime-edit-day-field-padding:0;--vv-input-text-element-input-state-disabled-cursor:not-allowed;--vv-input-text-element-input-state-readonly-cursor:text;--vv-input-text-element-input-state-readonly-user-select:text;--vv-input-text-element-input-before-display:flex;--vv-input-text-element-input-before-padding-left:var(--input-spacing-left);--vv-input-text-element-input-after-display:flex;--vv-input-text-element-input-after-padding-right:var(--input-spacing-right);--vv-input-text-element-number--moz-appearance:textfield;--vv-input-text-element-icon-position:var(--input-icon-position);--vv-input-text-element-icon-top:0;--vv-input-text-element-icon-left:0;--vv-input-text-element-icon-width:var(--input-icon-width);--vv-input-text-element-icon-height:var(--input-min-height);--vv-input-text-element-icon-margin:var(--input-icon-margin);--vv-input-text-element-icon-pointer-events:var(--input-icon-pointer-events);--vv-input-text-element-icon-flex-shrink:0;--vv-input-text-element-icon-after-position:var(--input-icon-position);--vv-input-text-element-icon-after-right:0;--vv-input-text-element-icon-after-left:auto;--vv-input-text-element-actions-group-display:flex;--vv-input-text-element-actions-group-flex-direction:column;--vv-input-text-element-actions-group-height:var(--input-min-height);--vv-input-text-element-action-position:relative;--vv-input-text-element-action-width:calc(var(--input-icon-width) + var(--input-spacing-left) + var(--input-spacing-right));--vv-input-text-element-action-height:var(--input-min-height);--vv-input-text-element-action-cursor:pointer;--vv-input-text-element-action-state-disabled-cursor:not-allowed;--vv-input-text-element-action-state-disabled-opacity:var(--opacity-50);--vv-input-text-element-action-state-focus-visible-background-color:var(--color-surface-3);--vv-input-text-element-action-state-hover-background-color:var(--color-surface-4);--vv-input-text-element-action-state-active-background-color:var(--color-surface-5);--vv-input-text-element-action-chevron-flex:1;--vv-input-text-element-action-chevron-background-position:center var(--spacing-2);--vv-input-text-element-action-chevron-background-size:var(--text-14) auto;--vv-input-text-element-action-chevron-background-repeat:no-repeat;--vv-input-text-element-action-chevron-background-image:var(--bg-chevron);--vv-input-text-element-action-chevron-up-rotate:180deg;--vv-input-text-element-hint-display:var(--input-hint-display);--vv-input-text-element-hint-font-size:var(--input-hint-font-size);--vv-input-text-element-hint-color:var(--input-hint-color);--vv-input-text-element-hint-padding-top:var(--input-hint-gap);--vv-input-text-element-hint-padding-inline:var(--spacing-xs);--vv-input-text-element-hint-white-space:var(--input-hint-white-space);--vv-input-text-element-hint-text-overflow:var(--input-hint-text-overflow);--vv-input-text-element-hint-overflow:var(--input-hint-overflow);--vv-input-text-element-limit-font-size:var(--input-hint-font-size);--vv-input-text-element-limit-color:var(--input-hint-color);--vv-input-text-element-unit-color:var(--input-placeholder-color);--vv-input-text-element-unit-display:flex;--vv-input-text-element-unit-align-items:center;--vv-input-text-element-unit-flex:0 1 auto;--vv-input-text-modifier-icon-after-element-limit-margin-left:calc((var(--spacing-sm) + 1em) * -1);--vv-input-text-modifier-valid-element-wrapper-pseudo-after-background:var(--input-valid-color);--vv-input-text-modifier-valid-element-wrapper-pseudo-after-scale:1;--vv-input-text-modifier-valid-element-hint-color:var(--input-valid-color);--vv-input-text-modifier-valid-element-limit-color:var(--input-valid-color);--vv-input-text-modifier-valid-element-icon-after-color:var(--input-valid-color);--vv-input-text-modifier-invalid-element-wrapper-pseudo-after-background:var(--input-invalid-color);--vv-input-text-modifier-invalid-element-wrapper-pseudo-after-scale:1;--vv-input-text-modifier-invalid-element-hint-color:var(--input-invalid-color);--vv-input-text-modifier-invalid-element-limit-color:var(--input-invalid-color);--vv-input-text-modifier-invalid-element-icon-after-color:var(--input-invalid-color);--vv-input-text-modifier-loading-element-wrapper-pseudo-after-opacity:var(--opacity-100);--vv-input-text-modifier-loading-element-wrapper-pseudo-after-animation:var(--animation-indeterminate);--vv-input-text-modifier-floating-position:relative;--vv-input-text-modifier-floating-element-label-position:absolute;--vv-input-text-modifier-floating-element-label-z-index:var(--z-1);--vv-input-text-modifier-floating-element-label-min-height:var(--input-min-height);--vv-input-text-modifier-floating-element-label-line-height:var(--input-min-height);--vv-input-text-modifier-floating-element-label-pointer-events:none;--vv-input-text-modifier-floating-element-label-font-size:inherit;--vv-input-text-modifier-floating-element-label-padding-inline:0;--vv-input-text-modifier-floating-element-label-margin:0;--vv-input-text-modifier-floating-element-label-will-change:transform;--vv-input-text-modifier-floating-element-label-transition:var(--transition-all);--vv-input-text-modifier-floating-element-input-will-change:transform;--vv-input-text-modifier-floating-element-input-transition:var(--transition-all);--vv-input-text-modifier-floating-element-input-pseudo-placeholder-will-change:opacity;--vv-input-text-modifier-floating-element-input-pseudo-placeholder-transition:var(--transition-opacity);--vv-input-text-modifier-floating-element-input-pseudo-placeholder-opacity:var(--opacity-0);--vv-input-text-modifier-floating-state-focus-within-element-label-translate:var(--input-floating-label-translate);--vv-input-text-modifier-floating-state-focus-within-element-label-font-size:var(--input-floating-label-font-size);--vv-input-text-modifier-floating-state-focus-within-element-input-pseudo-placeholder-opacity:var(--opacity-100);--vv-input-text-modifier-floating-state-dirty-element-label-translate:var(--input-floating-label-translate);--vv-input-text-modifier-floating-state-dirty-element-label-font-size:var(--input-floating-label-font-size);--vv-input-text-modifier-floating-state-dirty-element-input-pseudo-placeholder-opacity:var(--opacity-100);--vv-input-text-modifier-auto-width-element-inner-min-height:var(--input-min-height);--vv-input-text-modifier-auto-width-element-inner-cursor:text;--vv-input-text-modifier-auto-width-element-input-padding-block:0;--vv-input-text-modifier-auto-width-element-input-padding-inline:0;--vv-input-text-modifier-auto-width-element-input-min-width:1ch;--vv-input-text-modifier-auto-width-element-input-min-height:1em;--vv-input-text-modifier-auto-width-element-input-text-align:left;--vv-input-text-modifier-auto-width-element-unit-padding-right:0;--vv-input-text-modifier-auto-width-element-unit-padding-block:0;--vv-input-text-modifier-auto-width-state-dirty-element-input-flex:0 1 auto;--vv-input-text-modifier-auto-width-state-disabled-element-inner-cursor:not-allowed;--vv-input-text-state-disabled-opacity:var(--opacity-50);--vv-input-text-state-disabled-element-wrapper-state-hover-background-color:var(--input-background-color);--vv-input-text-state-disabled-element-wrapper-state-focus-within-background-color:var(--input-background-color);--vv-input-text-state-readonly-element-wrapper-pseudo-before-opacity:var(--opacity-0);--vv-input-text-state-readonly-element-wrapper-pseudo-after-opacity:var(--opacity-0);--vv-input-text-state-readonly-element-wrapper-state-hover-background-color:var(--input-background-color);--vv-input-text-state-readonly-element-wrapper-state-focus-within-background-color:var(--input-background-color)}:where(.vv-input-text){display:var(--vv-input-text-display);flex:var(--vv-input-text-flex);flex-direction:var(--vv-input-text-flex-direction);margin-bottom:var(--vv-input-text-margin-bottom);font-size:var(--vv-input-text-font-size);line-height:var(--vv-input-text-line-height);min-width:var(--vv-input-text-min-width)}:where(.vv-input-text__label,.vv-input-text>label){display:var(--vv-input-text-element-label-display);font-size:var(--vv-input-text-element-label-font-size);font-weight:var(--vv-input-text-element-label-font-weight);color:var(--vv-input-text-element-label-color);margin:var(--vv-input-text-element-label-margin);white-space:var(--vv-input-text-element-label-white-space);text-overflow:var(--vv-input-text-element-label-text-overflow);overflow:var(--vv-input-text-element-label-overflow);max-width:var(--vv-input-text-element-label-max-width)}:where(.vv-input-text__wrapper){position:var(--vv-input-text-element-wrapper-position);display:var(--vv-input-text-element-wrapper-display);align-items:var(--vv-input-text-element-wrapper-align-items);flex:var(--vv-input-text-element-wrapper-flex);overflow:var(--vv-input-text-element-wrapper-overflow);background-color:var(--vv-input-text-element-wrapper-background-color);will-change:var(--vv-input-text-element-wrapper-will-change);transition:var(--vv-input-text-element-wrapper-transition)}:where(.vv-input-text__wrapper):before{content:"";position:var(--vv-input-text-element-wrapper-pseudo-before-position);height:var(--vv-input-text-element-wrapper-pseudo-before-height);inset:var(--vv-input-text-element-wrapper-pseudo-before-inset);background:var(--vv-input-text-element-wrapper-pseudo-before-background)}:where(.vv-input-text__wrapper):after{content:"";position:var(--vv-input-text-element-wrapper-pseudo-after-position);height:var(--vv-input-text-element-wrapper-pseudo-after-height);inset:var(--vv-input-text-element-wrapper-pseudo-after-inset);background:var(--vv-input-text-element-wrapper-pseudo-after-background);scale:var(--vv-input-text-element-wrapper-pseudo-after-scale);transform-origin:var(--vv-input-text-element-wrapper-pseudo-after-transform-origin);will-change:var(--vv-input-text-element-wrapper-pseudo-after-will-change);transition:var(--vv-input-text-element-wrapper-pseudo-after-transition)}:where(.vv-input-text__wrapper--hover,.vv-input-text__wrapper.hover,.vv-input-text__wrapper:not([disabled]):hover){--vv-input-text-element-wrapper-background-color:var(--vv-input-text-element-wrapper-state-hover-background-color)}:where(.vv-input-text__wrapper--focus-within,.vv-input-text__wrapper.focus-within,.vv-input-text__wrapper:not([disabled]):focus-within){--vv-input-text-element-wrapper-background-color:var(--vv-input-text-element-wrapper-state-focus-within-background-color)}:where(.vv-input-text__wrapper--focus-within,.vv-input-text__wrapper.focus-within,.vv-input-text__wrapper:not([disabled]):focus-within):after{--vv-input-text-element-wrapper-pseudo-after-scale:var(--vv-input-text-element-wrapper-state-focus-within-pseudo-after-scale)}:where(.vv-input-text__inner){position:var(--vv-input-text-element-inner-position);display:var(--vv-input-text-element-inner-display);flex:var(--vv-input-text-element-inner-flex);min-width:var(--vv-input-text-element-inner-min-width)}:where(.vv-input-text__input,.vv-input-text input){display:var(--vv-input-text-element-input-display);flex:var(--vv-input-text-element-input-flex);align-items:var(--vv-input-text-element-input-align-items);color:var(--vv-input-text-element-input-color);line-height:var(--vv-input-text-element-input-line-height);padding-block:var(--input-spacing-top) var(--input-spacing-bottom);padding-inline:var(--input-spacing-left) var(--input-spacing-right);min-width:var(--vv-input-text-element-input-min-width);min-height:var(--vv-input-text-element-input-min-height);text-overflow:var(--vv-input-text-element-input-text-overflow)}:where(.vv-input-text__input,.vv-input-text input)::-moz-placeholder{content:"";color:var(--vv-input-text-element-input-pseudo-placeholder-color)}:where(.vv-input-text__input,.vv-input-text input)::placeholder{content:"";color:var(--vv-input-text-element-input-pseudo-placeholder-color)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-calendar-picker-indicator{content:"";position:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-position);padding:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-padding);top:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-top);right:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-right);opacity:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-opacity)}:where(.vv-input-text__input,.vv-input-text input)::-moz-calendar-picker-indicator{position:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-position);padding:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-padding);top:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-top);right:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-right);opacity:var(--vv-input-text-element-input-pseudo-calendar-picker-indicator-opacity)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-search-cancel-button{content:"";-webkit-appearance:var(--vv-input-text-element-input-pseudo-search-cancel-button--webkit-appearance);opacity:var(--vv-input-text-element-input-pseudo-search-cancel-button-opacity)}:where(.vv-input-text__input,.vv-input-text input)::-moz-search-cancel-button{-webkit-appearance:var(--vv-input-text-element-input-pseudo-search-cancel-button--webkit-appearance);opacity:var(--vv-input-text-element-input-pseudo-search-cancel-button-opacity)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-color-swatch-wrapper{content:"";padding:var(--vv-input-text-element-input-pseudo-color-swatch-wrapper-padding)}:where(.vv-input-text__input,.vv-input-text input)::-moz-color-swatch-wrapper{padding:var(--vv-input-text-element-input-pseudo-color-swatch-wrapper-padding)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-color-swatch{content:"";height:var(--vv-input-text-element-input-pseudo-color-swatch-height);border-radius:var(--vv-input-text-element-input-pseudo-color-swatch-border-radius);padding:var(--vv-input-text-element-input-pseudo-color-swatch-padding)}:where(.vv-input-text__input,.vv-input-text input)::-moz-color-swatch{height:var(--vv-input-text-element-input-pseudo-color-swatch-height);border-radius:var(--vv-input-text-element-input-pseudo-color-swatch-border-radius);padding:var(--vv-input-text-element-input-pseudo-color-swatch-padding)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-outer-spin-button{content:"";display:var(--vv-input-text-element-input-pseudo-outer-spin-button-display)}:where(.vv-input-text__input,.vv-input-text input)::-moz-outer-spin-button{display:var(--vv-input-text-element-input-pseudo-outer-spin-button-display)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-inner-spin-button{content:"";display:var(--vv-input-text-element-input-pseudo-inner-spin-button-display)}:where(.vv-input-text__input,.vv-input-text input)::-moz-inner-spin-button{display:var(--vv-input-text-element-input-pseudo-inner-spin-button-display)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-datetime-edit{content:"";padding:var(--vv-input-text-element-input-pseudo-datetime-edit-padding)}:where(.vv-input-text__input,.vv-input-text input)::-moz-datetime-edit{padding:var(--vv-input-text-element-input-pseudo-datetime-edit-padding)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-datetime-edit-fields-wrapper{content:"";padding:var(--vv-input-text-element-input-pseudo-datetime-edit-fields-wrapper-padding)}:where(.vv-input-text__input,.vv-input-text input)::-moz-datetime-edit-fields-wrapper{padding:var(--vv-input-text-element-input-pseudo-datetime-edit-fields-wrapper-padding)}:where(.vv-input-text__input,.vv-input-text input)::-webkit-datetime-edit-day-field{content:"";padding:var(--vv-input-text-element-input-pseudo-datetime-edit-day-field-padding)}:where(.vv-input-text__input,.vv-input-text input)::-moz-datetime-edit-day-field{padding:var(--vv-input-text-element-input-pseudo-datetime-edit-day-field-padding)}:where(.vv-input-text__input--disabled,.vv-input-text__input.disabled,.vv-input-text input.disabled,.vv-input-text__input[disabled],.vv-input-text input[disabled],.vv-input-text__input[aria-disabled=true],.vv-input-text input[aria-disabled=true]){cursor:var(--vv-input-text-element-input-state-disabled-cursor)}:where(.vv-input-text__input--readonly,.vv-input-text__input.readonly,.vv-input-text input.readonly,.vv-input-text__input[readonly],.vv-input-text input[readonly]){cursor:var(--vv-input-text-element-input-state-readonly-cursor);-webkit-user-select:var(--vv-input-text-element-input-state-readonly-user-select);-moz-user-select:var(--vv-input-text-element-input-state-readonly-user-select);user-select:var(--vv-input-text-element-input-state-readonly-user-select)}:where(.vv-input-text__input-before){display:var(--vv-input-text-element-input-before-display);padding-left:var(--vv-input-text-element-input-before-padding-left)}:where(.vv-input-text__input-after){display:var(--vv-input-text-element-input-after-display);padding-right:var(--vv-input-text-element-input-after-padding-right)}:where(.vv-input-text__number,.vv-input-text input[type=number]){-moz-appearance:var(--vv-input-text-element-number--moz-appearance)}:where(.vv-input-text__icon,.vv-input-text>div>:where(svg,[data-icon])){position:var(--vv-input-text-element-icon-position);top:var(--vv-input-text-element-icon-top);left:var(--vv-input-text-element-icon-left);width:var(--vv-input-text-element-icon-width);height:var(--vv-input-text-element-icon-height);margin:var(--vv-input-text-element-icon-margin);pointer-events:var(--vv-input-text-element-icon-pointer-events);flex-shrink:var(--vv-input-text-element-icon-flex-shrink)}:where(.vv-input-text__icon-after,.vv-input-text input+:where(svg,[data-icon])){position:var(--vv-input-text-element-icon-after-position);right:var(--vv-input-text-element-icon-after-right);left:var(--vv-input-text-element-icon-after-left)}:where(.vv-input-text__actions-group){display:var(--vv-input-text-element-actions-group-display);flex-direction:var(--vv-input-text-element-actions-group-flex-direction);height:var(--vv-input-text-element-actions-group-height)}:where(.vv-input-text__action){position:var(--vv-input-text-element-action-position);width:var(--vv-input-text-element-action-width);height:var(--vv-input-text-element-action-height);cursor:var(--vv-input-text-element-action-cursor)}:where(.vv-input-text__action--disabled,.vv-input-text__action.disabled,.vv-input-text__action[disabled],.vv-input-text__action[aria-disabled=true]){--vv-input-text-element-action-cursor:var(--vv-input-text-element-action-state-disabled-cursor);opacity:var(--vv-input-text-element-action-state-disabled-opacity)}:where(.vv-input-text__action--focus-visible,.vv-input-text__action.focus-visible,.vv-input-text__action:not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled=true]):focus-visible){background-color:var(--vv-input-text-element-action-state-focus-visible-background-color)}:where(.vv-input-text__action--hover,.vv-input-text__action.hover,.vv-input-text__action:not([disabled]):hover){background-color:var(--vv-input-text-element-action-state-hover-background-color)}:where(.vv-input-text__action--active,.vv-input-text__action.active,.vv-input-text__action:not([disabled]):active){background-color:var(--vv-input-text-element-action-state-active-background-color)}:where(.vv-input-text__action-chevron){flex:var(--vv-input-text-element-action-chevron-flex);background-position:var(--vv-input-text-element-action-chevron-background-position);background-size:var(--vv-input-text-element-action-chevron-background-size);background-repeat:var(--vv-input-text-element-action-chevron-background-repeat);background-image:var(--vv-input-text-element-action-chevron-background-image)}:where(.vv-input-text__action-chevron-up){rotate:var(--vv-input-text-element-action-chevron-up-rotate)}:where(.vv-input-text__hint,.vv-input-text>small){display:var(--vv-input-text-element-hint-display);font-size:var(--vv-input-text-element-hint-font-size);color:var(--vv-input-text-element-hint-color);padding-top:var(--vv-input-text-element-hint-padding-top);padding-inline:var(--vv-input-text-element-hint-padding-inline);white-space:var(--vv-input-text-element-hint-white-space);text-overflow:var(--vv-input-text-element-hint-text-overflow);overflow:var(--vv-input-text-element-hint-overflow)}:where(.vv-input-text__limit){padding-right:var(--input-spacing-right);font-size:var(--vv-input-text-element-limit-font-size);color:var(--vv-input-text-element-limit-color)}:where(.vv-input-text__unit){color:var(--vv-input-text-element-unit-color);display:var(--vv-input-text-element-unit-display);align-items:var(--vv-input-text-element-unit-align-items);flex:var(--vv-input-text-element-unit-flex);padding-right:var(--input-spacing-right);padding-block:var(--input-spacing-top) var(--input-spacing-bottom)}:where(.vv-input-text:has(input[disabled])),:where(.vv-input-text--disabled,.vv-input-text.disabled,.vv-input-text[disabled],.vv-input-text[aria-disabled=true]){opacity:var(--vv-input-text-state-disabled-opacity)}:where(.vv-input-text:has(input[disabled]) .vv-input-text__wrapper:hover),:where(.vv-input-text--disabled .vv-input-text__wrapper--hover,.vv-input-text--disabled .vv-input-text__wrapper.hover,.vv-input-text--disabled .vv-input-text__wrapper:not([disabled]):hover,.vv-input-text.disabled .vv-input-text__wrapper--hover,.vv-input-text.disabled .vv-input-text__wrapper.hover,.vv-input-text.disabled .vv-input-text__wrapper:not([disabled]):hover,.vv-input-text[disabled] .vv-input-text__wrapper--hover,.vv-input-text[disabled] .vv-input-text__wrapper.hover,.vv-input-text[disabled] .vv-input-text__wrapper:not([disabled]):hover,.vv-input-text[aria-disabled=true] .vv-input-text__wrapper--hover,.vv-input-text[aria-disabled=true] .vv-input-text__wrapper.hover,.vv-input-text[aria-disabled=true] .vv-input-text__wrapper:not([disabled]):hover){background-color:var(--vv-input-text-state-disabled-element-wrapper-state-hover-background-color)}:where(.vv-input-text:has(input[disabled]) .vv-input-text__wrapper:focus-within),:where(.vv-input-text--disabled .vv-input-text__wrapper--focus-within,.vv-input-text--disabled .vv-input-text__wrapper.focus-within,.vv-input-text--disabled .vv-input-text__wrapper:not([disabled]):focus-within,.vv-input-text.disabled .vv-input-text__wrapper--focus-within,.vv-input-text.disabled .vv-input-text__wrapper.focus-within,.vv-input-text.disabled .vv-input-text__wrapper:not([disabled]):focus-within,.vv-input-text[disabled] .vv-input-text__wrapper--focus-within,.vv-input-text[disabled] .vv-input-text__wrapper.focus-within,.vv-input-text[disabled] .vv-input-text__wrapper:not([disabled]):focus-within,.vv-input-text[aria-disabled=true] .vv-input-text__wrapper--focus-within,.vv-input-text[aria-disabled=true] .vv-input-text__wrapper.focus-within,.vv-input-text[aria-disabled=true] .vv-input-text__wrapper:not([disabled]):focus-within){background-color:var(--vv-input-text-state-disabled-element-wrapper-state-focus-within-background-color)}:where(.vv-input-text:has(input[readonly]) .vv-input-text__wrapper):before,:where(.vv-input-text--readonly .vv-input-text__wrapper,.vv-input-text.readonly .vv-input-text__wrapper,.vv-input-text[readonly] .vv-input-text__wrapper):before{content:"";opacity:var(--vv-input-text-state-readonly-element-wrapper-pseudo-before-opacity)}:where(.vv-input-text:has(input[readonly]) .vv-input-text__wrapper):after,:where(.vv-input-text--readonly .vv-input-text__wrapper,.vv-input-text.readonly .vv-input-text__wrapper,.vv-input-text[readonly] .vv-input-text__wrapper):after{content:"";opacity:var(--vv-input-text-state-readonly-element-wrapper-pseudo-after-opacity)}:where(.vv-input-text:has(input[readonly]) .vv-input-text__wrapper:hover),:where(.vv-input-text--readonly .vv-input-text__wrapper--hover,.vv-input-text--readonly .vv-input-text__wrapper.hover,.vv-input-text--readonly .vv-input-text__wrapper:not([disabled]):hover,.vv-input-text.readonly .vv-input-text__wrapper--hover,.vv-input-text.readonly .vv-input-text__wrapper.hover,.vv-input-text.readonly .vv-input-text__wrapper:not([disabled]):hover,.vv-input-text[readonly] .vv-input-text__wrapper--hover,.vv-input-text[readonly] .vv-input-text__wrapper.hover,.vv-input-text[readonly] .vv-input-text__wrapper:not([disabled]):hover){background-color:var(--vv-input-text-state-readonly-element-wrapper-state-hover-background-color)}:where(.vv-input-text:has(input[readonly]) .vv-input-text__wrapper:focus-within),:where(.vv-input-text--readonly .vv-input-text__wrapper--focus-within,.vv-input-text--readonly .vv-input-text__wrapper.focus-within,.vv-input-text--readonly .vv-input-text__wrapper:not([disabled]):focus-within,.vv-input-text.readonly .vv-input-text__wrapper--focus-within,.vv-input-text.readonly .vv-input-text__wrapper.focus-within,.vv-input-text.readonly .vv-input-text__wrapper:not([disabled]):focus-within,.vv-input-text[readonly] .vv-input-text__wrapper--focus-within,.vv-input-text[readonly] .vv-input-text__wrapper.focus-within,.vv-input-text[readonly] .vv-input-text__wrapper:not([disabled]):focus-within){background-color:var(--vv-input-text-state-readonly-element-wrapper-state-focus-within-background-color)}:where(.vv-input-text--icon-before.vv-input-text){--input-spacing-left:calc(var(--spacing-sm) * 2 + 1em)}:where(.vv-input-text--icon-after.vv-input-text){--input-spacing-right:calc(var(--spacing-sm) * 2 + 1em)}:where(.vv-input-text--icon-after .vv-input-text__limit){margin-left:var(--vv-input-text-modifier-icon-after-element-limit-margin-left)}:where(.vv-input-text--valid .vv-input-text__wrapper):after{content:"";background:var(--vv-input-text-modifier-valid-element-wrapper-pseudo-after-background);scale:var(--vv-input-text-modifier-valid-element-wrapper-pseudo-after-scale)}:where(.vv-input-text--valid>.vv-input-text__hint,.vv-input-text--valid>small){color:var(--vv-input-text-modifier-valid-element-hint-color)}:where(.vv-input-text--valid .vv-input-text__limit){color:var(--vv-input-text-modifier-valid-element-limit-color)}:where(.vv-input-text--valid .vv-input-text__icon-after,.vv-input-text--valid input+:where(svg,[data-icon])){color:var(--vv-input-text-modifier-valid-element-icon-after-color)}:where(.vv-input-text--invalid .vv-input-text__wrapper):after{content:"";background:var(--vv-input-text-modifier-invalid-element-wrapper-pseudo-after-background);scale:var(--vv-input-text-modifier-invalid-element-wrapper-pseudo-after-scale)}:where(.vv-input-text--invalid>.vv-input-text__hint,.vv-input-text--invalid>small){color:var(--vv-input-text-modifier-invalid-element-hint-color)}:where(.vv-input-text--invalid .vv-input-text__limit){color:var(--vv-input-text-modifier-invalid-element-limit-color)}:where(.vv-input-text--invalid .vv-input-text__icon-after,.vv-input-text--invalid input+:where(svg,[data-icon])){color:var(--vv-input-text-modifier-invalid-element-icon-after-color)}:where(.vv-input-text--loading .vv-input-text__wrapper):after{content:"";opacity:var(--vv-input-text-modifier-loading-element-wrapper-pseudo-after-opacity);animation:var(--vv-input-text-modifier-loading-element-wrapper-pseudo-after-animation)}:where(.vv-input-text--floating.vv-input-text){position:var(--vv-input-text-modifier-floating-position);margin-left:var(--input-spacing-left);margin-right:var(--input-spacing-right)}:where(.vv-input-text--floating .vv-input-text__wrapper),:where(.vv-input-text--floating>.vv-input-text__hint,.vv-input-text--floating>small){margin-left:calc(var(--input-spacing-left) * -1);margin-right:calc(var(--input-spacing-right) * -1)}:where(.vv-input-text--floating>.vv-input-text__label,.vv-input-text--floating>label){position:var(--vv-input-text-modifier-floating-element-label-position);z-index:var(--vv-input-text-modifier-floating-element-label-z-index);min-height:var(--vv-input-text-modifier-floating-element-label-min-height);line-height:var(--vv-input-text-modifier-floating-element-label-line-height);pointer-events:var(--vv-input-text-modifier-floating-element-label-pointer-events);font-size:var(--vv-input-text-modifier-floating-element-label-font-size);padding-inline:var(--vv-input-text-modifier-floating-element-label-padding-inline);margin:var(--vv-input-text-modifier-floating-element-label-margin);will-change:var(--vv-input-text-modifier-floating-element-label-will-change);transition:var(--vv-input-text-modifier-floating-element-label-transition)}:where(.vv-input-text--floating .vv-input-text__input,.vv-input-text--floating input){will-change:var(--vv-input-text-modifier-floating-element-input-will-change);transition:var(--vv-input-text-modifier-floating-element-input-transition)}:where(.vv-input-text--floating .vv-input-text__input,.vv-input-text--floating input)::-moz-placeholder{content:"";will-change:var(--vv-input-text-modifier-floating-element-input-pseudo-placeholder-will-change);-moz-transition:var(--vv-input-text-modifier-floating-element-input-pseudo-placeholder-transition);transition:var(--vv-input-text-modifier-floating-element-input-pseudo-placeholder-transition);opacity:var(--vv-input-text-modifier-floating-element-input-pseudo-placeholder-opacity)}:where(.vv-input-text--floating .vv-input-text__input,.vv-input-text--floating input)::placeholder{content:"";will-change:var(--vv-input-text-modifier-floating-element-input-pseudo-placeholder-will-change);transition:var(--vv-input-text-modifier-floating-element-input-pseudo-placeholder-transition);opacity:var(--vv-input-text-modifier-floating-element-input-pseudo-placeholder-opacity)}:where(.vv-input-text--floating.vv-input-text--focus-within>.vv-input-text__label,.vv-input-text--floating.vv-input-text.focus-within>.vv-input-text__label,.vv-input-text--floating.vv-input-text:not([disabled]):focus-within>.vv-input-text__label,.vv-input-text--floating.vv-input-text--focus-within>label,.vv-input-text--floating.vv-input-text.focus-within>label,.vv-input-text--floating.vv-input-text:not([disabled]):focus-within>label){translate:var(--vv-input-text-modifier-floating-state-focus-within-element-label-translate);font-size:var(--vv-input-text-modifier-floating-state-focus-within-element-label-font-size)}:where(.vv-input-text--floating.vv-input-text--focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text.focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text:not([disabled]):focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text--focus-within input,.vv-input-text--floating.vv-input-text.focus-within input,.vv-input-text--floating.vv-input-text:not([disabled]):focus-within input){padding-top:var(--input-floating-padding-top);padding-bottom:var(--input-floating-padding-bottom)}:where(.vv-input-text--floating.vv-input-text--focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text.focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text:not([disabled]):focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text--focus-within input,.vv-input-text--floating.vv-input-text.focus-within input,.vv-input-text--floating.vv-input-text:not([disabled]):focus-within input)::-moz-placeholder{content:"";opacity:var(--vv-input-text-modifier-floating-state-focus-within-element-input-pseudo-placeholder-opacity)}:where(.vv-input-text--floating.vv-input-text--focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text.focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text:not([disabled]):focus-within .vv-input-text__input,.vv-input-text--floating.vv-input-text--focus-within input,.vv-input-text--floating.vv-input-text.focus-within input,.vv-input-text--floating.vv-input-text:not([disabled]):focus-within input)::placeholder{content:"";opacity:var(--vv-input-text-modifier-floating-state-focus-within-element-input-pseudo-placeholder-opacity)}:where(.vv-input-text--floating.vv-input-text--dirty>.vv-input-text__label,.vv-input-text--floating.vv-input-text.dirty>.vv-input-text__label,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown))>.vv-input-text__label,.vv-input-text--floating.vv-input-text--dirty>label,.vv-input-text--floating.vv-input-text.dirty>label,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown))>label),:where(.vv-input-text--floating.vv-input-text--dirty>.vv-input-text__label,.vv-input-text--floating.vv-input-text.dirty>.vv-input-text__label,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown))>.vv-input-text__label,.vv-input-text--floating.vv-input-text--dirty>label,.vv-input-text--floating.vv-input-text.dirty>label,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown))>label){translate:var(--vv-input-text-modifier-floating-state-dirty-element-label-translate);font-size:var(--vv-input-text-modifier-floating-state-dirty-element-label-font-size)}:where(.vv-input-text--floating.vv-input-text--dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text.dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) .vv-input-text__input,.vv-input-text--floating.vv-input-text--dirty input,.vv-input-text--floating.vv-input-text.dirty input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) input),:where(.vv-input-text--floating.vv-input-text--dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text.dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) .vv-input-text__input,.vv-input-text--floating.vv-input-text--dirty input,.vv-input-text--floating.vv-input-text.dirty input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) input){padding-top:var(--input-floating-padding-top);padding-bottom:var(--input-floating-padding-bottom)}:where(.vv-input-text--floating.vv-input-text--dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text.dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) .vv-input-text__input,.vv-input-text--floating.vv-input-text--dirty input,.vv-input-text--floating.vv-input-text.dirty input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) input)::-moz-placeholder{content:"";opacity:var(--vv-input-text-modifier-floating-state-dirty-element-input-pseudo-placeholder-opacity)}:where(.vv-input-text--floating.vv-input-text--dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text.dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) .vv-input-text__input,.vv-input-text--floating.vv-input-text--dirty input,.vv-input-text--floating.vv-input-text.dirty input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) input)::placeholder,:where(.vv-input-text--floating.vv-input-text--dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text.dirty .vv-input-text__input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) .vv-input-text__input,.vv-input-text--floating.vv-input-text--dirty input,.vv-input-text--floating.vv-input-text.dirty input,.vv-input-text--floating.vv-input-text:not(:has(:placeholder-shown)) input)::placeholder{content:"";opacity:var(--vv-input-text-modifier-floating-state-dirty-element-input-pseudo-placeholder-opacity)}:where(.vv-input-text--auto-width .vv-input-text__inner){padding-block:var(--input-spacing-top) var(--input-spacing-bottom);padding-inline:var(--input-spacing-left) var(--input-spacing-right);min-height:var(--vv-input-text-modifier-auto-width-element-inner-min-height);cursor:var(--vv-input-text-modifier-auto-width-element-inner-cursor)}:where(.vv-input-text--auto-width .vv-input-text__input,.vv-input-text--auto-width input){padding-block:var(--vv-input-text-modifier-auto-width-element-input-padding-block);padding-inline:var(--vv-input-text-modifier-auto-width-element-input-padding-inline);min-width:var(--vv-input-text-modifier-auto-width-element-input-min-width);min-height:var(--vv-input-text-modifier-auto-width-element-input-min-height);text-align:var(--vv-input-text-modifier-auto-width-element-input-text-align)}:where(.vv-input-text--auto-width .vv-input-text__unit){padding-right:var(--vv-input-text-modifier-auto-width-element-unit-padding-right);padding-block:var(--vv-input-text-modifier-auto-width-element-unit-padding-block)}:where(.vv-input-text--auto-width.vv-input-text--dirty .vv-input-text__input,.vv-input-text--auto-width.vv-input-text.dirty .vv-input-text__input,.vv-input-text--auto-width.vv-input-text:not(:has(:placeholder-shown)) .vv-input-text__input,.vv-input-text--auto-width.vv-input-text--dirty input,.vv-input-text--auto-width.vv-input-text.dirty input,.vv-input-text--auto-width.vv-input-text:not(:has(:placeholder-shown)) input),:where(.vv-input-text--auto-width.vv-input-text--dirty .vv-input-text__input,.vv-input-text--auto-width.vv-input-text.dirty .vv-input-text__input,.vv-input-text--auto-width.vv-input-text:not(:has(:placeholder-shown)) .vv-input-text__input,.vv-input-text--auto-width.vv-input-text--dirty input,.vv-input-text--auto-width.vv-input-text.dirty input,.vv-input-text--auto-width.vv-input-text:not(:has(:placeholder-shown)) input){flex:var(--vv-input-text-modifier-auto-width-state-dirty-element-input-flex)}:where(.vv-input-text--auto-width.vv-input-text--disabled .vv-input-text__inner,.vv-input-text--auto-width.vv-input-text.disabled .vv-input-text__inner,.vv-input-text--auto-width.vv-input-text[disabled] .vv-input-text__inner,.vv-input-text--auto-width.vv-input-text[aria-disabled=true] .vv-input-text__inner){cursor:var(--vv-input-text-modifier-auto-width-state-disabled-element-inner-cursor)}