$input: (
	background-color-focus: var(--color-surface-2),
	background-color-hover: var(--color-surface-3),
	background-color: var(--color-surface-1),
	color: var(--color-word),
	display: flex,
	flex-direction: column,
	flex: 1,
	font-size: var(--text-16),
	gap: var(--spacing-md),
	line-height: var(--leading-normal),
	min-height: var(--spacing-52),
	min-width: 0,
	spacing-top: var(--spacing-sm),
	spacing-right: var(--spacing-sm),
	spacing-bottom: var(--spacing-sm),
	spacing-left: var(--spacing-sm),
	text-overflow: ellipsis,
	label: (
		color: var(--color-word-2),
		display: block,
		font-size: var(--text-14),
		font-weight: var(--font-normal),
		gap: var(--spacing-xs),
		max-width: 100%,
		overflow: hidden,
		text-overflow: ellipsis,
		white-space: nowrap,
	),
	icon: (
		margin: 0 var(--spacing-sm),
		pointer-events: none,
		position: absolute,
		width: 1em,
	),
	hint: (
		color: var(--color-word-2),
		display: block,
		font-size: var(--text-12),
		gap: var(--spacing-8),
		overflow: hidden,
		text-overflow: ellipsis,
		white-space: nowrap,
	),
	placeholder: (
		color: var(--color-word-4),
	),
	valid: (
		color: var(--color-success),
	),
	invalid: (
		color: var(--color-danger),
	),
	floating: (
		padding-top: calc(var(--input-spacing-top) + 0.55em),
		padding-bottom: calc(var(--input-spacing-bottom) - 0.55em),
		label: (
			font-size: var(--text-12),
			translate: 0 -0.8em,
		),
	),
) !default;
