/* Player extras: picture in picture button, keyboard OSD, sticky mini player.
   Paired with static/js/player_extras.js. */

/* ---------------------------------------------------------------- control bar button */

/* Matched to .fp-screen and .fp-settings in the youtube skin - same 30px box, same right float -
   so the button sits on the baseline of the existing controls instead of next to them. The top
   margin is 8px rather than the skin's 5px: these boxes carry their glyph centred, where the
   skin's icon font sits high in its own line box. The skin draws its icons from a font we have
   no glyph in, hence the inline SVG. */
.kt-player .fp-controls .pe-btn {
	position: relative;
	display: block;
	float: right;
	width: 30px;
	height: 30px;
	margin: 8px 0 0 0;
	padding: 0;
	cursor: pointer;
	opacity: 0.85;
	text-decoration: none;
}

.kt-player .fp-controls .pe-btn:hover {
	opacity: 1;
}

.kt-player .fp-controls .pe-btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	fill: #eee;
}

.kt-player .fp-controls .pe-pip.is-active svg {
	fill: #fff;
}

/* ---------------------------------------------------------------- keyboard feedback */

.pe-osd {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 13;
	padding: 10px 18px;
	background: rgba(0, 0, 0, 0.72);
	border-radius: 4px;
	color: #fff;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: opacity 0.18s ease;
	transition: opacity 0.18s ease;
}

.pe-osd.is-visible {
	opacity: 1;
}

/* ---------------------------------------------------------------- autoplay next */

/* Autoplay is a switch, so it is drawn as one - the same pill-and-knob control the big players
   use, wide enough to read as two states from across the room. It is wider than the icon buttons
   next to it, which is what sets it apart from them in the bar. */
.kt-player .fp-controls .pe-autonext {
	width: 40px;
	opacity: 1;
	margin: 8px 0 0 0;
}

.kt-player .fp-controls .pe-autonext .pe-switch {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 14px;
	margin: -7px 0 0 -14px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 7px;
	-webkit-transition: background 0.15s ease;
	transition: background 0.15s ease;
}

.kt-player .fp-controls .pe-autonext:hover .pe-switch {
	background: rgba(255, 255, 255, 0.45);
}

.kt-player .fp-controls .pe-autonext.is-on .pe-switch,
.kt-player .fp-controls .pe-autonext.is-on:hover .pe-switch {
	background: #fa4a1f;
}

.kt-player .fp-controls .pe-autonext .pe-switch-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 50%;
	-webkit-transition: -webkit-transform 0.15s ease;
	transition: transform 0.15s ease;
}

.kt-player .fp-controls .pe-autonext.is-on .pe-switch-knob {
	-webkit-transform: translateX(14px);
	transform: translateX(14px);
}

/* Above .fp-controls (12), so the countdown is not clickable-through to the timeline underneath.
   Hidden with visibility as well as opacity - a transparent overlay would still eat every click
   aimed at the player. */
.pe-next {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 13;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 14px;
	background: rgba(0, 0, 0, 0.88);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

.pe-next.is-visible {
	opacity: 1;
	visibility: visible;
}

/* The skin paints its big centre play button on .fp-ui:before whenever the player is paused,
   and a video that just ended counts as paused - so it showed through the overlay right next to
   the card. Only the image goes; the layer itself stays, because it is also the click target
   that resumes playback once the overlay is dismissed. */
.player-wrap.pe-next-open .kt-player .fp-ui:before {
	background-image: none !important;
}

.pe-next-card {
	width: 100%;
	max-width: 300px;
	text-align: center;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	color: #fff;
}

.pe-next-label {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #a5a5a5;
}

.pe-next-thumb {
	position: relative;
	display: block;
	margin: 0 auto 12px;
	line-height: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.pe-next-thumb img {
	width: 100%;
	height: auto;
}

/* Play mark over the thumbnail: the card is the thing to click, and without it the image reads
   as decoration. Drawn in css so it costs no request and inherits no icon font. */
.pe-next-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	-webkit-transition: background 0.15s ease;
	transition: background 0.15s ease;
}

.pe-next-play:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -8px 0 0 -5px;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
}

.pe-next-thumb:hover .pe-next-play {
	background: rgba(250, 74, 31, 0.9);
}

.pe-next-duration {
	position: absolute;
	right: 6px;
	bottom: 9px;
	padding: 1px 5px;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 2px;
	font-size: 11px;
	font-weight: bold;
	line-height: 16px;
	color: #fff;
}

/* Sits on the bottom edge of the thumbnail, where the eye already is. Stepped once per second by
   the script instead of animated over the whole ten, so it stays level with the number below it
   when the countdown is held for a background tab. */
.pe-next-bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.25);
}

.pe-next-bar i {
	display: block;
	width: 0;
	height: 100%;
	background: #fa4a1f;
	-webkit-transition: width 1s linear;
	transition: width 1s linear;
}

.pe-next-title {
	display: block;
	display: -webkit-box;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;

	/* Two lines then ellipsis - titles here run long, and a third line pushes the buttons off a
	   short player. */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pe-next-title:hover {
	color: #fff;
	text-decoration: underline;
}

.pe-next-count {
	margin-bottom: 14px;
	font-size: 13px;
	color: #a5a5a5;
}

.pe-next-count b {
	color: #fff;
}

.pe-next-actions a {
	display: inline-block;
	padding: 8px 18px;
	margin: 0 3px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.pe-next-go {
	background: #fa4a1f;
	color: #fff;
}

.pe-next-go:hover {
	background: #e3431b;
	color: #fff;
}

.pe-next-cancel {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.pe-next-cancel:hover {
	background: rgba(255, 255, 255, 0.26);
	color: #fff;
}

/* Docked, the player is about 380px wide and half as tall: the card keeps the title and the
   buttons and drops everything that needs room. */
.player-wrap.pe-sticky .pe-next-thumb,
.player-wrap.pe-sticky .pe-next-label {
	display: none;
}

.player-wrap.pe-sticky .pe-next {
	padding: 10px;
}

.player-wrap.pe-sticky .pe-next-title {
	margin-bottom: 4px;
	font-size: 13px;
}

.player-wrap.pe-sticky .pe-next-count {
	margin-bottom: 8px;
	font-size: 12px;
}

.player-wrap.pe-sticky .pe-next-actions a {
	padding: 5px 11px;
	font-size: 12px;
}

/* A phone in portrait leaves the player about 200px tall - not enough for the thumbnail and the
   buttons both, and the buttons are the part that has to stay reachable. */
@media screen and (max-width: 767px) {
	.pe-next-thumb,
	.pe-next-label {
		display: none;
	}

	.pe-next-title {
		font-size: 14px;
	}
}

/* ---------------------------------------------------------------- sticky mini player */

/* The inline padding-bottom that carries the aspect ratio in the flow has to go: a percentage
   padding resolves against the containing block, and for a fixed element that is the viewport,
   which stretched the docked player out of shape. The script sets width and height in pixels
   instead; the values here are only what shows for the frame before it runs. */
.player-wrap.pe-sticky {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	width: 380px;
	padding-bottom: 0 !important;
	background: #000;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	border-radius: 4px;
}

.pe-sticky-placeholder {
	width: 100%;
	height: 0;
}

.pe-sticky-actions {
	display: none;
}

.player-wrap.pe-sticky .pe-sticky-actions {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	/* Above .fp-ui (11) and .fp-controls (12), or the player's own layer swallows the clicks. */
	z-index: 14;
	padding: 4px;
}

.pe-sticky-btn {
	display: inline-block;
	width: 28px;
	height: 28px;
	position: relative;
	margin-left: 2px;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
}

.pe-sticky-btn:hover {
	background: rgba(0, 0, 0, 0.8);
}

.pe-sticky-btn svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	fill: #fff;
}

/* The mini player is a desktop affordance: on a phone it covers the content it is supposed to
   let you keep reading. The script enforces the same breakpoint, this is the belt to its braces
   for the case where the class is already on the node when the window is resized down. */
@media screen and (max-width: 1023px) {
	.player-wrap.pe-sticky {
		position: relative;
		right: auto;
		bottom: auto;
		width: auto !important;
		height: auto !important;
		max-width: none;
		box-shadow: none;
		border-radius: 0;
	}

	.player-wrap.pe-sticky .pe-sticky-actions {
		display: none;
	}
}