/*
 * Play / pause control for the banner video.
 *
 * Its own file so it never collides with the design work going on in style.css.
 * Enqueued from inc/custom-function.php (handle: uks-banner-video).
 *
 * The icons are ordinary image blocks in the banner; js/banner-video.js puts
 * is-playing / is-paused on their wrapper and this shows the right one. Only
 * the swap is handled here - where the icons sit and how big they are belongs
 * to the design.
 */

.play-pause-ic-wrap .main-banner-play-ic,
.play-pause-ic-wrap .main-banner-pause-ic {
	margin: 0;
}

/* Playing: offer pause. Paused: offer play. */
.play-pause-ic-wrap.is-playing .main-banner-play-ic,
.play-pause-ic-wrap.is-paused .main-banner-pause-ic {
	display: none;
}

/*
 * Before the JS runs neither class is set, so both would show. The video
 * carries autoplay, so the pause icon is the right one to start with.
 */
.play-pause-ic-wrap:not(.is-playing):not(.is-paused) .main-banner-play-ic {
	display: none;
}

.play-pause-ic-wrap [role="button"]:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}