$vv-button: (
	--button-border-width: var(--border-2),
	--button-line-height: var(--leading-normal),
	[border-width]: var(--button-border-width),
	[line-height]: var(--button-line-height),
	position: relative,
	background: var(--color-brand),
	border-radius: var(--rounded),
	border-style: solid,
	border-color: var(--color-brand),
	color: var(--color-white),
	font-family: var(--font-sans),
	font-weight: var(--font-semibold),
	gap: 1ch,
	padding-block: var(--spacing-7),
	padding-inline: var(--spacing-16),
	text-shadow: 0 1px 0 var(--color-gray-darken-5),
	transition: var(--transition-all),
	will-change: all,
	min-width: 0,
	pointer-events: auto,
	state: (
		focus-visible: (
			outline-offset: var(--spacing-4),
			outline: var(--spacing-px) solid var(--color-brand),
		),
		hover: (
			background: var(--color-brand-darken-1),
			border-color: var(--color-brand-darken-1),
			text-decoration: none,
		),
		active: (
			background: var(--color-brand-darken-2),
			border-color: var(--color-brand-darken-2),
		),
		pressed: (
			background: var(--color-brand-darken-2),
			border-color: var(--color-brand-darken-2),
		),
		disabled: (
			opacity: var(--opacity-50),
			cursor: not-allowed,
		),
	),
	element: (
		icon: (
			_alias: '> :where(svg, [data-icon])',
			block-size: 1.1em,
			inline-size: 1.1em,
			margin: 0,
			flex-shrink: 0,
			[min-height]: calc(1em * var(--button-line-height)),
		),
		label: (
			white-space: nowrap,
			text-overflow: ellipsis,
			min-width: 0,
			overflow: hidden,
		),
	),
	modifier: (
		icon-only: (
			element: (
				icon: (
					margin-inline: calc(var(--spacing-6) * -1),
				),
			),
		),
		primary: (
			background: var(--color-gray-darken-3),
			border-color: var(--color-gray-darken-3),
			color: var(--color-white),
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-gray-darken-3),
				),
				hover: (
					background: var(--color-gray-darken-4),
					border-color: var(--color-gray-darken-4),
				),
				active: (
					background: var(--color-gray-darken-5),
					border-color: var(--color-gray-darken-5),
				),
				pressed: (
					background: var(--color-gray-darken-5),
					border-color: var(--color-gray-darken-5),
				),
			),
		),
		secondary: (
			background: var(--color-surface),
			border-style: solid,
			border-color: var(--color-gray-lighten-4),
			color: var(--color-word),
			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
				),
				hover: (
					background: var(--color-gray-lighten-4),
				),
				active: (
					background: var(--color-gray-lighten-3),
				),
				pressed: (
					background: var(--color-gray-lighten-4),
				),
			),
		),
		danger: (
			background: var(--color-danger),
			border-color: var(--color-danger),
			color: var(--color-white),
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-danger),
				),
				hover: (
					background: var(--color-danger-darken-1),
					border-color: var(--color-danger-darken-1),
				),
				active: (
					background: var(--color-danger-darken-2),
					border-color: var(--color-danger-darken-2),
				),
				pressed: (
					background: var(--color-danger-darken-2),
					border-color: var(--color-danger-darken-2),
				),
			),
		),
		ghost: (
			background: transparent,
			border-color: transparent,
			color: var(--color-gray-darken-1),
			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
					outline-offset: var(--spacing-0),
				),
				hover: (
					background: var(--color-gray-lighten-5),
					color: var(--color-word-2),
				),
				active: (
					background: var(--color-gray-lighten-4),
					color: var(--color-word-2),
				),
				pressed: (
					background: var(--color-gray-lighten-4),
					color: var(--color-word-2),
				),
			),
		),
		link: (
			background: transparent,
			border-width: var(--border-0),
			padding: 0,
			color: var(--color-brand-darken-1),
			font-weight: inherit,
			text-shadow: none,
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid
						var(--color-brand-lighten-4),
					outline-offset: var(--spacing-4),
				),
				hover: (
					text-decoration: underline,
					text-underline-offset: var(--spacing-4),
				),
				active: (
					color: var(--color-brand-darken-3),
				),
			),
			element: (
				icon: (
					margin: var(--spacing-0),
				),
			),
		),
		static-light: (
			background: var(--color-white),
			border-color: var(--color-white),
			color: var(--color-black),
			text-shadow: 0 1px 0 var(--color-gray-lighten-5),
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
				),
				hover: (
					border-color: var(--color-gray-lighten-5),
					background: var(--color-gray-lighten-5),
				),
				active: (
					border-color: var(--color-gray-lighten-4),
					background: var(--color-gray-lighten-4),
				),
				pressed: (
					border-color: var(--color-gray-lighten-4),
					background: var(--color-gray-lighten-4),
				),
			),
		),
		static-dark: (
			background: var(--color-black),
			border-color: var(--color-black),
			color: var(--color-white),
			text-shadow: 0 1px 0 var(--color-gray-darken-5),
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-gray-darken-4),
				),
				hover: (
					border-color: var(--color-gray-darken-4),
					background: var(--color-gray-darken-4),
				),
				active: (
					border-color: var(--color-gray-darken-3),
					background: var(--color-gray-darken-3),
				),
				pressed: (
					border-color: var(--color-gray-darken-3),
					background: var(--color-gray-darken-3),
				),
			),
		),
		action: (
			--button-border-width: var(--border),
			--button-line-height: var(--leading-snug),
			font-size: var(--text-14),
			background: var(--color-surface-1),
			color: var(--color-word-1),
			border-color: var(--color-word-5),
			font-weight: var(--font-normal),
			padding-inline: var(--spacing-6),
			padding-block: var(--spacing-4),
			text-shadow: none,
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
				),
				hover: (
					background: var(--color-surface-2),
				),
				active: (
					background: var(--color-surface-5),
					color: var(--color-word),
				),
				pressed: (
					color: var(--color-white),
					background: var(--color-gray-darken-1),
					border-color: var(--color-gray-darken-1),
				),
			),
			element: (
				icon: (
					margin-inline: -0.125ch,
					block-size: calc(1em * var(--leading-snug)),
					inline-size: calc(1em * var(--leading-snug)),
				),
			),
		),
		action-quiet: (
			--button-border-width: var(--border),
			--button-line-height: var(--leading-snug),
			font-size: var(--text-14),
			background: transparent,
			color: var(--color-word-1),
			border-color: transparent,
			font-weight: var(--font-normal),
			padding-inline: var(--spacing-6),
			padding-block: var(--spacing-4),
			text-shadow: none,
			state: (
				focus-visible: (
					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
					outline-offset: var(--spacing-0),
				),
				hover: (
					background: var(--color-surface-2),
					border-color: var(--color-surface-2),
				),
				active: (
					background: var(--color-surface-5),
					border-color: var(--color-surface-5),
					color: var(--color-word),
				),
				pressed: (
					color: var(--color-white),
					background: var(--color-gray-darken-1),
					border-color: var(--color-gray-darken-1),
				),
			),
			element: (
				icon: (
					margin-inline: -0.125ch,
					block-size: calc(1em * var(--leading-snug)),
					inline-size: calc(1em * var(--leading-snug)),
				),
			),
		),
		rounded: (
			border-radius: var(--rounded-full),
		),
		block: (
			width: 100%,
			max-width: auto,
		),
		reverse: (
			element: (
				label: (
					order: -1,
				),
			),
		),
		column: (
			flex-direction: column,
			gap: var(--spacing-2),
		),
		full-bleed: (
			min-width: 20ch,
		),
	),
) !default;