$vv-select: (
	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),
	user-select: none,
	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,
			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,
						),
					),
				),
				open: (
					background-color: var(--input-background-color-focus),
					pseudo: (
						after: (
							scale: 1,
						),
					),
				),
			),
		),
		inner: (
			position: relative,
			display: flex,
			flex: 1,
			width: 100%,
			min-width: 0,
		),
		value: (
			text-overflow: var(--input-text-overflow),
			white-space: nowrap,
			overflow: hidden,
		),
		input: (
			_alias: 'select',
			display: flex,
			align-items: center,
			flex-grow: 1,
			flex-shrink: 1,
			flex-wrap: wrap,
			min-width: 0,
			color: var(--input-placeholder-color),
			[padding]: var(--input-spacing-top)
				calc(var(--input-spacing-right) * 2 + 1em)
				var(--input-spacing-bottom) var(--input-spacing-left),
			background-image: var(--bg-chevron),
			background-repeat: no-repeat,
			[background-position]: right var(--input-spacing-right) center,
			background-size: 1em,
			min-height: var(--input-min-height),
			gap: 0.5ch,
			text-overflow: var(--input-text-overflow),
			white-space: nowrap,
			state: (
				disabled: (
					cursor: not-allowed,
				),
			),
			pseudo: (
				marker: (
					display: none,
				),
				-webkit-details-marker: (
						display: none,
					),
			),
		),
		input-before: (
			display: flex,
			padding-left: var(--input-spacing-left),
		),
		input-after: (
			display: flex,
			padding-right: var(--input-spacing-right),
		),
		option: (
			_alias: 'select > option',
		),
		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: 'select + :where(svg, [data-icon])',
			position: var(--input-icon-position),
			right: 0,
			left: auto,
		),
		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),
				),
			),
		),
		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: (
		readonly: (
			opacity: var(--opacity-100),
			cursor: text,
			user-select: text,
			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),
						),
					),
				),
				input: (
					background-image: none,
					cursor: 'text',
				),
			),
		),
		dirty: (
			element: (
				input: (
					color: var(--input-color),
				),
			),
		),
		multiple: (
			element: (
				wrapper: (
					align-items: flex-start,
				),
				input: (
					overflow: auto,
					background-image: none,
					padding: 0,
				),
				option: (
					[padding]: var(--input-spacing-top)
						var(--input-spacing-right) var(--input-spacing-bottom)
						var(--input-spacing-left),
					min-height: var(--input-min-height),
					display: flex,
					align-items: center,
					color: var(--input-color),
					state: (
						checked: (
							color: var(--color-brand),
							background-color: var(--color-surface-brand),
						),
						disabled: (
							color: var(--input-placeholder-color),
						),
					),
				),
			),
		),
		icon-before: (
			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
		),
		icon-after: (
			--input-spacing-right: calc(var(--spacing-sm) * 2 + 1em),
		),
		valid: (
			element: (
				wrapper: (
					pseudo: (
						after: (
							background: var(--input-valid-color),
							scale: 1,
						),
					),
				),
				hint: (
					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),
				),
				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',
					transform-origin: left,
					transition: var(--transition-all),
				),
				input: (
					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),
							opacity: var(--opacity-100),
						),
					),
				),
			),
			modifier: (
				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),
							opacity: var(--opacity-100),
						),
					),
				),
			),
		),
	),
	state: (
		disabled: (
			opacity: var(--opacity-50),
			cursor: not-allowed,
			element: (
				wrapper: (
					state: (
						hover: (
							background-color: var(--input-background-color),
						),
						focus-within: (
							background-color: var(--input-background-color),
						),
					),
					pseudo: (
						before: (
							opacity: var(--opacity-0),
						),
						after: (
							opacity: var(--opacity-0),
						),
					),
				),
			),
		),
	),
) !default;