$vv-badge: (
	--badge-font-size: 0.7rem,
	[font-size]: var(--badge-font-size),
	border-width: 0,
	background-color: var(--color-brand),
	border-color: var(--color-brand),
	color: var(--color-white),
	border-style: solid,
	border-radius: 0.5em,
	min-height: 2em,
	min-width: 2em,
	padding: 0 0.5em,
	display: inline-flex,
	justify-content: center,
	align-items: center,
	gap: 0.5ch,
	white-space: nowrap,
	font-family: var(--font-sans),
	font-weight: var(--font-normal),
	text-shadow: none,
	line-height: var(--leading-none),
	overflow: hidden,
	flex-shrink: 0,
	vertical-align: middle,
	state: (
		empty: (
			font-size: inherit,
			min-width: 0,
			min-height: 0,
			[width]: var(--badge-font-size),
			[height]: var(--badge-font-size),
			[border-radius]: calc(var(--badge-font-size) * 0.5),
			padding: 0,
		),
		focus-within: (
			outline-offset: var(--spacing-4),
			outline: var(--spacing-px) solid currentcolor,
		),
	),
	element: (
		button: (
			_alias: '> button',
			_combinator: '>',
			cursor: pointer,
			padding: 0 0.5em,
			margin: 0 -0.5em,
			min-height: 2em,
			transition: var(--transition-colors),
			state: (
				hover: (
					background-color: var(--color-alpha-3),
				),
				active: (
					background-color: var(--color-alpha-5),
				),
			),
		),
	),
	modifier: (
		action: (
			gap: calc(0.5ch + 0.5em),
		),
		sm: (
			--badge-font-size: 0.6rem,
		),
		rounded: (
			border-radius: 1em,
		),
		white: (
			background-color:
				hsl(
					var(--color-white-hue) var(--color-white-saturation)
						var(--color-white-lightness) / 80%
				),
			color: var(--color-black),
		),
		black: (
			background-color:
				hsl(
					var(--color-black-hue) var(--color-black-saturation)
						var(--color-black-lightness) / 80%
				),
			color: var(--color-white),
		),
		danger: (
			background-color: var(--color-danger),
		),
		success: (
			background-color: var(--color-success),
		),
		warning: (
			background-color: var(--color-warning-darken-5),
		),
		info: (
			background-color: var(--color-info-darken-5),
		),
		accent: (
			background-color: var(--color-accent),
		),
		gray: (
			background-color: var(--color-gray-darken-1),
		),
		outline: (
			border-width: var(--border),
			color: var(--color-brand),
			border-color: currentcolor,
			background-color: transparent,
			modifier: (
				danger: (
					color: var(--color-danger),
				),
				success: (
					color: var(--color-success),
				),
				warning: (
					color: var(--color-warning-darken-5),
				),
				info: (
					color: var(--color-info-darken-5),
				),
				accent: (
					color: var(--color-accent),
				),
				gray: (
					color: var(--color-gray-darken-1),
				),
			),
		),
		ghost: (
			background-color: transparent,
			color: var(--color-brand),
			modifier: (
				danger: (
					color: var(--color-danger),
				),
				success: (
					color: var(--color-success),
				),
				warning: (
					color: var(--color-warning-darken-5),
				),
				info: (
					color: var(--color-info-darken-5),
				),
				accent: (
					color: var(--color-accent),
				),
				gray: (
					color: var(--color-gray-darken-1),
				),
			),
		),
	),
) !default;