/*
 * core/embed/video
 */

.wp-block-embed.is-type-video {
	--video--border-radius: var(--wp--custom--border--radius--10);
	--video--icon--play: var(--wp--custom--icons--play-button);
	--video--icon--play--size: 72px 72px;
}

/* Figcaption */
.wp-block-embed.is-type-video figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.57;
	z-index: 4;
}

/* Video wrapper */
.wp-block-embed.is-type-video .wp-block-embed__wrapper {
	border-radius: var(--video--border-radius);
	overflow: hidden;
}

/* Lite YouTube: Component */
.wp-block-embed lite-youtube {
	position: absolute;
	inset: 0;
	block-size: 100%;
	inline-size: 100%;
	max-inline-size: none !important;
}

/* Play button */
.wp-block-embed lite-youtube > .lyt-playbtn,
.wp-block-embed.is-type-video.block-editor-block-list__block > .wp-block-embed__wrapper::after {
	--lite-yt--button--image: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 100%) 100%);
	--lite-yt--button--size: 100% 100%;
	--lite-yt--button--position: center center, bottom center;
	--lite-yt--button--bg-size: var(--video--icon--play--size), 100% 192px;

	padding: 0;
	background-image: var(--video--icon--play), var(--lite-yt--button--image);
	background-position: var(--lite-yt--button--position);
	background-repeat: no-repeat;
	background-size: var(--lite-yt--button--bg-size);
	transition: background 0.3s ease-in-out;
}

/* Editor overlay */
.wp-block-embed.is-type-video.block-editor-block-list__block > .wp-block-embed__wrapper::after {
	display: block;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 100%;
	inline-size: 100%;
	content: '';
	pointer-events: none;
	z-index: 3;
}

/* Lite YouTube: Dialog */
.wp-block-embed__dialog {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: var(--wp--custom--width--content);
	max-inline-size: calc(100vw - var(--wp--custom--root--padding-offset)) !important;
	margin: 0;
	padding: var(--wp--preset--spacing--50) 0;
	translate: -50% -50%;
	background-color: transparent;
	border: 0;
	overflow: visible;
}

.wp-block-embed__dialog-inner {
	line-height: 0;
}

/* Lite YouTube: Video embed */
.wp-block-embed__dialog-inner iframe {
	position: relative !important;
	block-size: auto;
	inline-size: 100%;
	background-color: #252729;
	border: none;
	border-radius: var(--wp--custom--border--radius--20);
	aspect-ratio: 16 / 9;
}

/* Lite YouTubeClose button */
.wp-block-embed__dialog-close {
	position: absolute;
	inset-block-start: 0;
	inset-inline: auto 0;
	block-size: 24px;
	inline-size: 24px;
	padding: 0;
	background: transparent no-repeat center center;
	background-image: url(/wp-content/themes/worthington-christian/assets/images/icons/close.svg);
	border: 0;
	cursor: pointer;
	z-index: 3;
	appearance: none;
}

/* Custom poster image: Editor */
.wp-block-embed.has-poster-image .wp-block-embed__wrapper .block-library-embed__interactive-overlay {
	opacity: 1;
}

.wp-block-embed.has-poster-image .wp-block-embed__wrapper .block-library-embed__interactive-overlay::before {
	display: block;
	position: absolute;
	inset: 0;
	block-size: 100%;
	inline-size: 100%;
	padding: 0;
	background-image: var(--poster-image-url);
	background-position: var(--poster-image-position);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--video--border-radius);
	content: '';
	z-index: 1;
}

/* Active */
.wp-block-embed lite-youtube > .lyt-playbtn:where(:active) {
	--lite-yt--button--bg-size: 100% 100%;
}

/* Hover */
@media (hover: hover) {
	.wp-block-embed.is-type-video:where(:hover, :focus-within) {
		--video--icon--play: var(--wp--custom--icons--play-button-active);
	}

	.wp-block-embed lite-youtube > .lyt-playbtn:where(:hover, :focus-within),
	.wp-block-embed.is-type-video.block-editor-block-list__block:where(:hover, :focus-within) > .wp-block-embed__wrapper::after {
		--lite-yt--button--bg-size: var(--video--icon--play--size), 100% 100%;
	}
}

@media (width >= 1024px) {
	.wp-block-embed__dialog {
		padding: 0;
	}

	.wp-block-embed__dialog-close {
		inset-block-start: 0;
		inset-inline: calc(100% + var(--wp--preset--spacing--30)) auto;
	}
}