dialog {
	width: min(var(--line-length-lg), 90vw);
	margin-block: var(--space-xs);
	margin-inline: auto;
	padding-block: var(--space-md);
	padding-inline: var(--space-md);
	overflow: visible;
	background-color: var(--color-bg-dark);
	border-radius: var(--border-radius-lg);
	border: var(--border-width-sm) solid
		oklch(from var(--color-border) l c h / 50%);
	box-shadow: var(--shadow-lg);
	transition: opacity 0.1s, scale 0.1s, overlay 0.1s allow-discrete, display
		0.1s allow-discrete;
	opacity: 0;
	scale: 0.9;
	position: fixed;
	inset-block-start: 50dvh;
	translate: 0 -50%;

	&:focus-visible {
		outline: none;
	}

	&::backdrop {
		transition: all 0.1s ease-in-out;
		backdrop-filter: blur(0.1rem);
	}

	&:popover-open {
		opacity: 1;
		scale: 1;
	}
}

@starting-style {
	dialog:popover-open {
		opacity: 0;
		scale: 0.9;
	}
}

[role="tooltip"] {
	position: absolute;
	inset: inherit;
	position-visibility: always;
	position-try-fallbacks: flip-block, y-start span-x-end, y-end span-x-end,
		y-start span-x-start, y-end span-x-start;
	position-area: y-start span-all;
	padding-block: var(--space-xs);
	padding-inline: var(--space-sm);
	margin-block: var(--space-xs);
	font-size: var(--font-size-sm);
	background-color: var(--color-bg-dark);
	border: var(--border-width-sm) solid
		oklch(from var(--color-border) l c h / 50%);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-lg);
}
