$vv-alert: (
	--alert-duration: 3s,
	background-color: var(--color-surface-2),
	box-shadow: var(--shadow-lg),
	border-color: var(--color-gray-lighten-4),
	border-radius: var(--rounded),
	border-style: solid,
	border-width: var(--border),
	display: flex,
	flex-wrap: wrap,
	align-items: center,
	gap: var(--spacing-sm),
	min-width: 0,
	overflow: hidden,
	padding: var(--spacing-sm),
	element: (
		header: (
			display: flex,
			align-items: center,
			gap: var(--spacing-sm),
			line-height: var(--leading-normal),
			color: var(--color-word),
			overflow: hidden,
			text-overflow: ellipsis,
			flex-shrink: 0,
		),
		title: (
			min-width: 0,
			font-weight: var(--font-bold),
			overflow: hidden,
			text-overflow: ellipsis,
		),
		content: (
			line-height: var(--leading-normal),
			color: var(--color-word-1),
			text-overflow: ellipsis,
			overflow: hidden,
		),
		footer: (
			display: flex,
		),
		close: (
			position: absolute,
			right: var(--spacing-md),
			inline-size: 1em,
			block-size: 1em,
			cursor: pointer,
			background-image: var(--bg-close),
			background-position: center,
			background-size: 100% auto,
			background-repeat: no-repeat,
			align-self: center,
			border-radius: var(--rounded),
		),
		icon: (
			flex-shrink: 0,
		),
		close-mask: (
			display: none,
			position: absolute,
			top: 0,
			width: 50%,
			height: 100%,
			left: 50%,
			background-color: var(--color-gray),
			[animation]: pie-masks var(--alert-duration) steps(1, end) reverse,
			z-index: var(--z-1),
		),
	),
	modifier: (
		success: (
			border-color: var(--color-success-lighten-5),
			background-color: var(--color-surface-success),
			element: (
				icon: (
					color: var(--color-success-darken-1),
				),
				header: (
					color: var(--color-success-darken-1),
				),
			),
		),
		danger: (
			border-color: var(--color-danger-lighten-5),
			background-color: var(--color-surface-danger),
			element: (
				icon: (
					color: var(--color-danger),
				),
				header: (
					color: var(--color-danger),
				),
			),
		),
		warning: (
			border-color: var(--color-warning-lighten-1),
			background-color: var(--color-surface-warning),
			element: (
				icon: (
					color: var(--color-warning-darken-5),
				),
				header: (
					color: var(--color-warning-darken-5),
				),
			),
		),
		info: (
			border-color: var(--color-info-lighten-1),
			background-color: var(--color-surface-info),
			element: (
				icon: (
					color: var(--color-info-darken-5),
				),
				header: (
					color: var(--color-info-darken-5),
				),
			),
		),
		accent: (
			border-color: var(--color-accent-lighten-5),
			background-color: var(--color-surface-accent),
			element: (
				icon: (
					color: var(--color-accent),
				),
				header: (
					color: var(--color-accent),
				),
			),
		),
		brand: (
			border-color: var(--color-brand-lighten-5),
			background-color: var(--color-surface-brand),
			element: (
				icon: (
					color: var(--color-brand-darken-3),
				),
				header: (
					color: var(--color-brand-darken-3),
				),
			),
		),
		dismissable: (
			position: relative,
			padding-right: calc(var(--spacing-md) * 2 + 1em),
		),
		nowrap: (
			breakpoint: (
				sm: (
					flex-wrap: nowrap,
					white-space: nowrap,
				),
			),
		),
		notification: (
			padding: var(--spacing-0),
			width: clamp(15dvw, 20rem, 80dvw),
			border-color: var(--color-gray),
			flex-direction: column,
			align-items: normal,
			gap: var(--spacing-0),
			element: (
				header: (
					padding: var(--spacing-xs) var(--spacing-sm),
					background-color: var(--color-gray-darken-1),
					color: var(--color-white),
				),
				title: (
					font-weight: var(--font-normal),
					margin-right: auto,
				),
				icon: (
					color: var(--color-white),
				),
				content: (
					padding: var(--spacing-sm),
					font-size: var(--text-14),
				),
				footer: (
					padding: 0 var(--spacing-sm) var(--spacing-sm)
						var(--spacing-sm),
				),
				close: (
					background-color: var(--color-surface-2),
					border-radius: var(--rounded),
					background-size: 70% auto,
					inline-size: 1.1em,
					block-size: 1.1em,
				),
			),
			modifier: (
				dismissable: (
					padding-right: 0,
					element: (
						header: (
							position: relative,
							padding-right: calc(var(--spacing-md) * 2 + 1em),
						),
					),
				),
				success: (
					border-color: var(--color-success),
					element: (
						header: (
							background-color: var(--color-success),
						),
					),
				),
				danger: (
					border-color: var(--color-danger),
					element: (
						header: (
							background-color: var(--color-danger),
						),
					),
				),
				warning: (
					border-color: var(--color-warning-darken-5),
					element: (
						header: (
							background-color: var(--color-warning-darken-5),
						),
					),
				),
				info: (
					border-color: var(--color-info-darken-5),
					element: (
						header: (
							background-color: var(--color-info-darken-5),
						),
					),
				),
				accent: (
					border-color: var(--color-accent),
					element: (
						header: (
							background-color: var(--color-accent),
						),
					),
				),
				brand: (
					border-color: var(--color-brand),
					element: (
						header: (
							background-color: var(--color-brand),
						),
					),
				),
			),
		),
		callout: (
			box-shadow: none,
			border-radius: var(--rounded-none),
			border-width: 0 0 0 var(--spacing-4),
			flex-direction: column,
			align-items: normal,
			element: (
				title: (
					text-transform: uppercase,
				),
				content: (
					line-height: var(--leading-normal),
				),
			),
		),
		auto-close: (
			element: (
				close: (
					background-color: var(--color-white),
					border: var(--border) solid var(--color-white),
					border-radius: 50%,
					overflow: hidden,
					opacity: var(--opacity-80),
					background-image: none,
					background-size: 70% auto,
					inline-size: 1.1em,
					block-size: 1.1em,
					[animation]: fade-out var(--alert-duration) forwards,
					pseudo: (
						before: (
							position: absolute,
							top: 0,
							width: 50%,
							height: 100%,
							transform-origin: 100% 50%,
							background-color: var(--color-gray),
							border-radius: 100% 0 0 100% / 50% 0 0 50%,
							[animation]: spin var(--alert-duration) linear,
						),
						after: (
							position: absolute,
							top: 0,
							width: 50%,
							height: 100%,
							background-color: var(--color-white),
							border-radius: 100% 0 0 100% / 50% 0 0 50%,
							[animation]: pie-masks var(--alert-duration)
								steps(1, end),
							opacity: var(--opacity-0),
						),
					),
				),
				close-mask: (
					display: block,
				),
			),
			state: (
				hover: (
					element: (
						close-mask: (
							opacity: var(--opacity-0),
							animation: none,
						),
						close: (
							border-radius: var(--rounded),
							background-image: var(--bg-close),
							animation: none,
							pseudo: (
								before: (
									opacity: var(--opacity-0),
									animation: none,
								),
								after: (
									opacity: var(--opacity-0),
									animation: none,
								),
							),
						),
					),
				),
			),
		),
	),
	transition: (
		fade-inline-end: (
			active: (
				transition: var(--transition-all),
			),
			enter-from: (
				opacity: var(--opacity-0),
				translate: 100%,
			),
			leave-to: (
				opacity: var(--opacity-0),
				translate: 100%,
			),
		),
		fade-inline-start: (
			active: (
				transition: var(--transition-all),
			),
			enter-from: (
				opacity: var(--opacity-0),
				translate: -100%,
			),
			leave-to: (
				opacity: var(--opacity-0),
				translate: -100%,
			),
		),
		fade-block-top: (
			active: (
				transition: var(--transition-all),
			),
			enter-from: (
				opacity: var(--opacity-0),
				translate: 0 -100%,
			),
			leave-to: (
				opacity: var(--opacity-0),
				translate: 0 -100%,
			),
		),
		fade-block-bottom: (
			active: (
				transition: var(--transition-all),
			),
			enter-from: (
				opacity: var(--opacity-0),
				translate: 0 100%,
			),
			leave-to: (
				opacity: var(--opacity-0),
				translate: 0 100%,
			),
		),
		fade: (
			active: (
				transition: var(--transition-opacity),
			),
			enter-from: (
				opacity: var(--opacity-0),
			),
			leave-to: (
				opacity: var(--opacity-0),
			),
		),
	),
) !default;