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