$vv-textarea: (
	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),
		),
		limit: (
			position: absolute,
			right: var(--input-gap),
			bottom: var(--input-gap),
			font-size: var(--input-hint-font-size),
			color: var(--input-hint-color),
		),
		inner: (
			position: relative,
			display: flex,
			flex: 1,
		),
		wrapper: (
			position: relative,
			display: flex,
			align-items: flex-start,
			flex: 1,
			overflow: hidden,
			background-color: var(--input-background-color),
			will-change: background-color,
			transition: var(--transition-colors),
			min-height: var(--input-min-height),
			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,
						),
					),
				),
			),
		),
		input: (
			_alias: 'textarea',
			display: block,
			flex: 1,
			color: var(--input-color),
			[padding]: var(--input-spacing-top) var(--input-spacing-right)
				var(--input-spacing-bottom) var(--input-spacing-left),
			overflow: auto,
			text-overflow: var(--input-text-overflow),
			min-height: var(--input-min-height),
			pseudo: (
				placeholder: (
					color: var(--input-placeholder-color),
				),
			),
			state: (
				disabled: (
					cursor: not-allowed,
				),
				readonly: (
					cursor: text,
					user-select: text,
				),
			),
		),
		input-before: (
			display: flex,
			align-items: center,
			margin-top: var(--input-spacing-top),
			margin-left: var(--input-spacing-left),
		),
		input-after: (
			display: flex,
			align-items: center,
			margin-top: var(--input-spacing-top),
			margin-right: var(--input-spacing-right),
		),
		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: 'textarea + :where(svg, [data-icon])',
			position: var(--input-icon-position),
			right: 0,
			left: auto,
		),
		actions-group: (
			display: flex,
			flex-direction: column,
			position: absolute,
			right: 0,
			top: 0,
			bottom: var(--spacing-px),
		),
		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),
		),
	),
	modifier: (
		icon-before: (
			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
		),
		icon-after: (
			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
		),
		resizable: (
			element: (
				input: (
					resize: vertical,
				),
			),
		),
		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),
								),
							),
						),
					),
				),
			),
		),
	),
	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;