/* Minimal layout for YouTube dialogs: centered (UA default for modals), 16:9, as large as fits the viewport */
.youtube-dialog {
	/* Height budget leaves room for the close button above the video */
	width: min(95vw, calc((95dvh - 6rem) * 16 / 9));
	max-width: none;
	padding: 0;
	margin: auto !important;
	overflow: visible;
}

.youtube-dialog__close {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2rem;
	height: 2rem;
	inset-block-start: -1rem;
	inset-inline-end: -1rem;
	margin-inline-start: auto;
	z-index: 1;
	cursor: pointer;

	background: var(--wp--preset--color--color-2);
	border: 1px solid var(--wp--preset--color--color-2);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--default);

	&:hover {
		background: var(--wp--preset--color--color-1);
		border-color: var(--wp--preset--color--color-1);
	}
}