/**
 * Click-to-load video facade.
 *
 * Loaded only on the ten posts that actually carry a video - see
 * seg_2018_video_facade_assets() in inc/video-defer.php.
 *
 * This file is deliberately outside sass/ and style.css: those are compiled by
 * CodeKit, and edits made directly to style.css are lost on the next build.
 */

.seg-video-facade {
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: #000;
	cursor: pointer;
	vertical-align: bottom;
	-webkit-appearance: none;
	appearance: none;
}

/* Fills the box the replaced iframe occupied, without distorting the frame. */
.seg-video-facade__thumb {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.seg-video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	border-radius: 12px;
	background-color: rgba(18, 18, 18, 0.76);
	transition: background-color 0.18s ease;
}

.seg-video-facade__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -6px;
	border-width: 10px 0 10px 17px;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
}

.seg-video-facade:hover .seg-video-facade__play,
.seg-video-facade:focus-visible .seg-video-facade__play {
	background-color: #cc0000;
}

/* The theme sets `button { outline: none }` globally, so this has to be a
   class-level selector to restore a visible keyboard focus state. */
.seg-video-facade:focus-visible {
	outline: 3px solid #0f52ba;
	outline-offset: 2px;
}

.seg-video-facade__frame {
	max-width: 100%;
	border: 0;
}

/* Self-hosted video. The theme's `max-width: 100%` rule lists embed, iframe and
   object but not video, and MediaElement used to do this sizing itself - without
   it the element overflows the content column on narrow screens. */
.seg-video {
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.seg-video-facade__play {
		transition: none;
	}
}