$vv-alert-group: (
	position: relative,
	z-index: var(--z-notification-alert),
	display: flex,
	flex-direction: column,
	gap: var(--spacing-sm),
	overflow: hidden,
	pointer-events: none,
	element: (
		list: (
			_alias: '> [role="group"]',
			_combinator: '>',
			display: flex,
			flex-direction: column,
			gap: var(--spacing-xs),
			state: (
				empty: (
					display: none,
				),
			),
		),
		item: (
			_alias: '> [role="group"] > *',
			transition: var(--transition-all),
			flex-shrink: 0,
			pointer-events: auto,
		),
		not-first: (
			_alias: '> [role="group"] > *:not(:first-child)',
		),
		nth-1: (
			--alert-counter: 1,
			_alias: '> [role="group"] > *:nth-child(1)',
		),
		nth-2: (
			--alert-counter: 2,
			_alias: '> [role="group"] > *:nth-child(2)',
		),
		nth-3: (
			--alert-counter: 3,
			_alias: '> [role="group"] > *:nth-child(3)',
		),
		nth-4: (
			--alert-counter: 4,
			_alias: '> [role="group"] > *:nth-child(4)',
		),
		nth-5: (
			--alert-counter: 5,
			_alias: '> [role="group"] > *:nth-child(5)',
		),
		nth-other: (
			_alias: '> [role="group"] > *:nth-child(n+6)',
		),
	),
	modifier: (
		fixed: (
			position: fixed,
			padding: var(--spacing-lg),
			max-width: var(--w-full),
			max-height: var(--h-full),
		),
		absolute: (
			position: absolute,
			padding: var(--spacing-lg),
			max-width: var(--w-full),
			max-height: var(--h-full),
		),
		reverse: (
			flex-direction: column-reverse,
			element: (
				list: (
					flex-direction: column-reverse,
				),
			),
		),
		top-start: (
			inset-block: 0 auto,
			inset-inline: 0 auto,
		),
		top-middle: (
			inset-block: 0 auto,
			inset-inline: 50% auto,
			translate: -50%,
		),
		top-end: (
			inset-block: 0 auto,
			inset-inline: auto 0,
		),
		center-start: (
			inset-block: 50% auto,
			translate: 0 -50%,
			inset-inline: 0 auto,
		),
		center-middle: (
			inset-block: 50% auto,
			inset-inline: 50% auto,
			translate: -50% -50%,
		),
		center-end: (
			inset-block: 50% auto,
			inset-inline: auto 0,
			translate: 0 -50%,
		),
		bottom-start: (
			inset-block: auto 0,
			inset-inline: 0 auto,
		),
		bottom-middle: (
			inset-block: auto 0,
			inset-inline: 50% auto,
			translate: -50%,
		),
		bottom-end: (
			inset-block: auto 0,
			inset-inline: auto 0,
		),
		full-bleed: (
			width: clamp(15dvw, 20rem, 80dvw),
		),
		stack: (
			element: (
				item: (
					flex-wrap: nowrap,
					white-space: nowrap,
				),
				nth-1: (
					z-index: var(--z-notification-alert),
				),
				not-first: (
					[translate]: 0 calc(-100% * (var(--alert-counter, 1) - 1)),
					[scale]: calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
					[z-index]:
						calc(
							var(--z-notification-alert) - var(
									--alert-counter,
									1
								)
						),
					filter: grayscale(100%),
				),
				nth-other: (
					opacity: 0,
				),
			),
			state: (
				hover: (
					element: (
						not-first: (
							translate: 0,
							scale: 1,
							filter: none,
						),
					),
				),
			),
			modifier: (
				reverse: (
					element: (
						not-first: (
							[translate]: 0
								calc(100% * (var(--alert-counter, 1) - 1)),
							[scale]:
								calc(1 - 0.05 * (var(--alert-counter, 1) - 1)),
						),
					),
					state: (
						hover: (
							element: (
								not-first: (
									translate: 0,
									scale: 1,
								),
							),
						),
					),
				),
			),
		),
	),
);