$vv-checkbox: (
	display: inline-flex,
	flex-wrap: wrap,
	align-items: center,
	cursor: pointer,
	user-select: none,
	margin: 0 var(--input-gap) var(--input-gap) 0,
	color: var(--input-color),
	font-size: var(--input-font-size),
	line-height: var(--input-line-height),
	min-width: var(--input-min-width),
	state: (
		disabled: (
			opacity: var(--opacity-30),
			cursor: not-allowed,
			element: (
				input: (
					cursor: not-allowed,
				),
			),
		),
	),
	element: (
		input: (
			_alias: "> input[type='checkbox']",
			border: var(--spacing-2) solid var(--input-color),
			min-width: var(--spacing-20),
			height: var(--spacing-20),
			margin: 0 var(--input-label-gap) 0 0,
			background-position: center,
			background-size: var(--text-12) auto,
			background-repeat: no-repeat,
			cursor: pointer,
			position: relative,
			state: (
				checked: (
					background-image: var(--bg-check),
				),
				indeterminate: (
					background-image: var(--bg-minus),
				),
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-brand),
					outline-offset: var(--spacing-2),
				),
			),
		),
		hint: (
			_alias: '> small',
			_combinator: '>',
			flex-basis: 100%,
			display: var(--input-hint-display),
			font-size: var(--input-hint-font-size),
			color: var(--input-hint-color),
			padding-top: var(--input-hint-gap),
			white-space: var(--input-hint-white-space),
			text-overflow: var(--input-hint-text-overflow),
			overflow: var(--input-hint-overflow),
			max-width: var(--input-hint-max-width),
		),
	),
	modifier: (
		readonly: (
			opacity: var(--opacity-100),
			cursor: default,
			pointer-events: none,
		),
		switch: (
			element: (
				input: (
					border: 0,
					min-width: var(--spacing-44),
					height: var(--spacing-24),
					border-radius: var(--spacing-12),
					background-color: var(--color-word-5),
					position: relative,
					will-change: background-color,
					transition: var(--transition-colors),
					pseudo: (
						after: (
							width: var(--spacing-20),
							height: var(--spacing-20),
							border-radius: 50%,
							position: absolute,
							inset: var(--spacing-2) 0 0 var(--spacing-2),
							background: var(--color-white),
							will-change: transform,
							transition: var(--transition-transform),
						),
					),
					state: (
						hover: (
							background-color: var(--color-word-4),
						),
						active: (
							background-color: var(--color-word-3),
						),
						indeterminate: (
							background-image: none,
							pseudo: (
								after: (
									translate: 50%,
								),
							),
						),
						checked: (
							background-image: none,
							background-color: var(--color-brand),
							pseudo: (
								after: (
									translate: 100%,
								),
							),
						),
					),
				),
			),
		),
		valid: (
			element: (
				hint: (
					color: var(--input-valid-color),
				),
			),
		),
		invalid: (
			element: (
				hint: (
					color: var(--input-invalid-color),
				),
			),
		),
	),
) !default;