.fp-video {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
}

/* fills the embed's 16:9 frame, like the iframe it stands in for */
.wp-has-aspect-ratio .fp-video {
	position: absolute;
	inset: 0;
	height: 100%;
}

.fp-video__poster {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.fp-video__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	box-shadow: var(--wp--preset--shadow--soft, 0 1px 2px rgb(28 25 23 / 0.06), 0 8px 24px rgb(28 25 23 / 0.06));
	color: var(--wp--preset--color--ink, #1c1917);
	font-size: 1.75rem;
	translate: -50% -50%;
	transition: scale 0.2s, background-color 0.2s;
}

/* a triangle looks left-heavy when centred by its box */
.fp-video__icon svg {
	translate: 6% 0;
}

.fp-video:hover .fp-video__icon,
.fp-video:focus-visible .fp-video__icon {
	scale: 1.06;
	background: #fff;
}

.fp-video:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #b4201a);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

	.fp-video:hover .fp-video__icon,
	.fp-video:focus-visible .fp-video__icon {
		scale: none;
	}
}