$vv-dialog: (
	display: flex,
	z-index: var(--z-modal-backdrop),
	position: fixed,
	inset: 0,
	align-items: center,
	justify-content: center,
	width: inherit,
	min-width: 100%,
	height: inherit,
	min-height: 100%,
	padding: var(--spacing-md),
	border: 0,
	background-color: var(--color-backdrop),
	backdrop-filter: var(--blur-sm),
	opacity: var(--opacity-100),
	state: (
		close: (
			display: none,
		),
		open: (
			overflow: hidden,
		),
	),
	element: (
		wrapper: (
			_alias: '> article',
			_combinator: '>',
			display: flex,
			flex-direction: column,
			position: relative,
			box-shadow: var(--shadow-lg),
			width: clamp(30dvw, 40rem, 90dvw),
			max-height: 90dvh,
			z-index: var(--z-modal),
			background: var(--color-surface),
			border-radius: var(--rounded-md),
			overflow: hidden,
		),
		header: (
			_alias: '> article > header',
			display: flex,
			flex-wrap: no-wrap,
			justify-content: space-between,
			align-items: center,
			font-size: var(--text-md),
			padding: var(--spacing-md),
			background: var(--color-surface-1),
			border-bottom: var(--border) solid var(--color-surface-4),
		),
		close: (
			inline-size: 1em,
			block-size: 1em,
			cursor: pointer,
			background-image: var(--bg-close),
			background-position: center,
			background-size: 100% auto,
			background-repeat: no-repeat,
		),
		content: (
			padding: var(--spacing-md),
			line-height: var(--leading-normal),
			flex: 1,
			min-height: 0,
			overflow: auto,
		),
		footer: (
			_alias: '> article > footer',
			display: flex,
			justify-content: flex-end,
			padding: var(--spacing-md),
			background: var(--color-surface-1),
			border-top: var(--border) solid var(--color-surface-4),
		),
	),
	transition: (
		fade-block: (
			active: (
				transition: var(--transition-opacity),
				element: (
					wrapper: (
						transition: var(--transition-transform),
					),
				),
			),
			enter-from: (
				opacity: var(--opacity-0),
				element: (
					wrapper: (
						translate: 0 100%,
					),
				),
			),
			leave-to: (
				opacity: var(--opacity-0),
				element: (
					wrapper: (
						translate: 0 -100%,
					),
				),
			),
		),
		fade-inline: (
			active: (
				transition: var(--transition-opacity),
				element: (
					wrapper: (
						transition: var(--transition-transform),
					),
				),
			),
			enter-from: (
				opacity: var(--opacity-0),
				element: (
					wrapper: (
						translate: -100%,
					),
				),
			),
			leave-to: (
				opacity: var(--opacity-0),
				element: (
					wrapper: (
						translate: 100%,
					),
				),
			),
		),
		scale: (
			active: (
				transition: var(--transition-opacity),
				element: (
					wrapper: (
						transition: var(--transition-transform),
					),
				),
			),
			inert: (
				opacity: var(--opacity-0),
				element: (
					wrapper: (
						scale: 0,
					),
				),
			),
		),
	),
	modifier: (
		small: (
			element: (
				wrapper: (
					width: clamp(10dvw, 25rem, 90dvw),
				),
			),
		),
		fullscreen: (
			padding: 0,
			element: (
				wrapper: (
					border-radius: var(--rounded-0),
					max-width: auto,
					max-height: auto,
					width: 100%,
					height: 100%,
				),
			),
		),
	),
) !default;