dialog.svelte-hvt9mv,
	dialog.svelte-hvt9mv:focus {
		position: fixed;
		width: 100vw;
		height: 100vh;
		max-width: none;
		max-height: none;
		background-color: hsl(from var(--vats-background) h s l / 20%);

		main:where(.svelte-hvt9mv) {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		section:where(.svelte-hvt9mv) {
			overflow: hidden;
			width: max-content;
			height: max-content;
			margin: auto auto;
			border-radius: 1rem;
			border: 2px solid var(--vats-coloredtext);
			background-color: var(--vats-background);
			line-height: 0;
		}

		button:where(.svelte-hvt9mv),
		button:where(.svelte-hvt9mv):focus {
			position: absolute;
			top: 0rem;
			left: 0.25rem;
			background: none;
			border: none;
			font-size: 2.5rem;
			font-weight: bold;
			cursor: pointer;
			color: var(--vats-coloredtext);
			z-index: 100;
		}
	}

	dialog.svelte-hvt9mv::backdrop {
		backdrop-filter: blur(4px);
	}