/**
 * Play / pause button for .video-wrap (assets/js/video-wrap.js).
 * Plain class selectors (low specificity) so one extra class can override them.
 */

.video-wrap[data-lhd-video] {
	--lhd-video-btn-size: 88px;
	--lhd-video-btn-icon: 36px;
	--lhd-video-btn-bg: rgba(1, 31, 52, 0.6);
	--lhd-video-btn-bg-hover: var(--lhd-yellow, #daa520);
	--lhd-video-btn-color: var(--lhd-white, #fff);
	--lhd-video-btn-border: var(--lhd-yellow, #daa520);
	position: relative;
}

.video-wrap[data-lhd-video] .oxygen-vsb-responsive-video-wrapper {
	position: relative;
}

.video-wrap .lhd-video__media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
	background: #000;
}

.video-wrap .lhd-video-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: var(--lhd-video-btn-size);
	height: var(--lhd-video-btn-size);
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--lhd-video-btn-border);
	border-radius: 50%;
	background: var(--lhd-video-btn-bg);
	color: var(--lhd-video-btn-color);
	cursor: pointer;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.video-wrap .lhd-video-btn:hover,
.video-wrap .lhd-video-btn:focus-visible {
	background: var(--lhd-video-btn-bg-hover);
	transform: translate(-50%, -50%) scale(1.06);
}

.video-wrap .lhd-video-btn__icon {
	width: var(--lhd-video-btn-icon);
	height: var(--lhd-video-btn-icon);
	fill: currentColor;
}

/* Paused: play icon. */
.video-wrap .lhd-video-btn__icon--pause {
	display: none;
}

/* Playing: hide button, show pause icon on hover / keyboard focus. */
.video-wrap.is-playing .lhd-video-btn {
	opacity: 0;
	visibility: hidden;
}

.video-wrap.is-playing:hover .lhd-video-btn,
.video-wrap.is-playing .lhd-video-btn:focus-visible {
	opacity: 1;
	visibility: visible;
}

.video-wrap.is-playing .lhd-video-btn__icon--play {
	display: none;
}

.video-wrap.is-playing .lhd-video-btn__icon--pause {
	display: block;
}

@media (max-width: 767px) {
	.video-wrap[data-lhd-video] {
		--lhd-video-btn-size: 64px;
		--lhd-video-btn-icon: 26px;
	}
}