.hyl-player {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #080808;
	isolation: isolate;
}

.hyl-player::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	content: "";
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
}

.hyl-thumbnail,
.hyl-iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
}

.hyl-thumbnail {
	z-index: 0;
	object-fit: cover;
	transition: transform 220ms ease, filter 220ms ease;
}

/*
 * Foxiz and some WordPress image rules force height:auto on content images.
 * The stronger, scoped declarations keep YouTube's 4:3 thumbnail centered and
 * crop its built-in letterbox bars to the 16:9 player without affecting other
 * images on the page.
 */
.hyl-player > img.hyl-thumbnail {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
}

.hyl-play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hyl-play-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 52px;
	border-radius: 14px;
	background: #ff0033;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.38);
	transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.hyl-play-triangle {
	display: block;
	width: 0;
	height: 0;
	margin-left: 5px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 17px solid currentColor;
}

.hyl-play:hover .hyl-play-button,
.hyl-play:focus-visible .hyl-play-button {
	transform: scale(1.08);
	background: #e6002e;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.46);
}

.hyl-player:not([data-hyl-loaded="1"]):hover .hyl-thumbnail {
	transform: scale(1.015);
	filter: brightness(0.9);
}

.hyl-play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.hyl-player[data-hyl-loaded="1"]::after {
	display: none;
}

/* Gutenberg responsive Embed blocks reserve their ratio on the parent. */
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper > .hyl-player {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

/* Foxiz reserves featured-video height on .embed-holder. */
.pvideo-embed .embed-holder {
	position: relative;
}

.pvideo-embed .float-holder > .hyl-player {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

@media (max-width: 600px) {
	.hyl-play-button {
		width: 62px;
		height: 44px;
		border-radius: 12px;
	}

	.hyl-play-triangle {
		border-top-width: 8px;
		border-bottom-width: 8px;
		border-left-width: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hyl-thumbnail,
	.hyl-play-button {
		transition: none;
	}
}