/*
 * Video.js player skin overrides for WPStream ("vjs-wpstream").
 *
 * Custom styling applied on top of the default Video.js theme: transparent
 * control bar, control button sizing/opacity, the live-edge control, volume
 * panel behaviour, and SVG icon backgrounds for the fullscreen/PiP buttons.
 * Scoped to the .vjs-wpstream player and the featured-player wrapper.
 */

/* Control bar: fully transparent background, fixed height, centred controls. */
.vjs-wpstream.vjs-theme-default .vjs-control-bar {
	background-color: hsla(0, 0%, 100%, 0);
	padding: 0px 12px;
	height: auto;
	height: 4em;
	align-items: center;
}

/* Individual control buttons: sizing, slight transparency, hover transition. */
.vjs-wpstream .vjs-control {
	height: 44px;
	width: 34px;
	opacity: .87;
	transition: .3s ease-out;
	padding: 0px;
	height: 3em;
	width: 3em;
}

/* Narrow the seek/progress bar. */
.video-js .vjs-progress-control {
	width: 4em;
	min-width: 4em;
}

/* Enlarge the control icon glyphs. */
.vjs-wpstream .vjs-button > .vjs-icon-placeholder:before {
	font-size: 2.1em;
	line-height: 44px;
	line-height: 1.6;
}

/* Remove default button hover chrome; only bump opacity to full. */
.vjs-wpstream .button:hover, .vjs-wpstream button:hover, .vjs-wpstream input[type="button"]:hover, .vjs-wpstream input[type="reset"]:hover, .vjs-wpstream input[type="submit"]:hover {
	background: transparent;
	opacity: 1;
}

/* Live-edge control: sizing and vertical centring. */
.vjs-wpstream .vjs-live-control {
	font-size: 1.1em;
	line-height: 3em;
	height: 4em;
	align-items: center;
}

/* "LIVE" label width inside the live control. */
.vjs-wpstream .vjs-live-control .vjs-live-display {
	width: 4em;
}

/* Featured-player wrapper: drop the live display's top margin. */
.wpstream-featured-player-wrapper .vjs-live-display {
	margin-top: 0 !important;
}

/* Featured-player wrapper: hide flagged elements once playback starts. */
.wpstream-featured-player-wrapper .hide_on_play {
	display: none;
}

/* Volume slider: remove surrounding margin. */
.vjs-wpstream .vjs-volume-panel .vjs-volume-control {
	margin: 0px 0px 0px 0px;
}

/* Volume tooltip: static positioning nudged up. */
.vjs-wpstream .vjs-volume-panel .vjs-volume-control .vjs-volume-tooltip {
	position: static;
	margin-top: -20px;
}

/* Force transparent backgrounds on all player buttons. */
.vjs-wpstream .vjs-button {
	background-color: transparent !important;
}

/* Fullscreen button: custom "enter fullscreen" SVG icon. */
.vjs-wpstream .vjs-fullscreen-control {
	background-image: url("https://cdn-ildoekf.nitrocdn.com/KkMPgVYmWQGXnBFVWWXBZQdpXpaAoAcv/assets/images/optimized/rev-dc97cae/awake.net/wp-content/plugins/wpstream/public/css/images/fullscreen_simple.svg") !important;
	background-position: 50% !important;
	background-repeat: no-repeat !important;
	background-size: 40% !important;
}

.vjs-wpstream .vjs-fullscreen-control.nitro-lazy {
	background-image: none !important;
}

/* While in fullscreen: swap to the "exit fullscreen" SVG icon. */
.vjs-wpstream.vjs-fullscreen .vjs-fullscreen-control {
	background-image: url("https://cdn-ildoekf.nitrocdn.com/KkMPgVYmWQGXnBFVWWXBZQdpXpaAoAcv/assets/images/optimized/rev-dc97cae/awake.net/wp-content/plugins/wpstream/public/css/images/fullscreen_full.svg") !important;
	background-position: 50% !important;
	background-repeat: no-repeat !important;
	background-size: 40% !important;
}

.vjs-wpstream.vjs-fullscreen .vjs-fullscreen-control.nitro-lazy {
	background-image: none !important;
}

/* Picture-in-picture button: custom SVG icon. */
.vjs-wpstream .vjs-picture-in-picture-control {
	background-image: url("https://cdn-ildoekf.nitrocdn.com/KkMPgVYmWQGXnBFVWWXBZQdpXpaAoAcv/assets/images/optimized/rev-dc97cae/awake.net/wp-content/plugins/wpstream/public/css/images/pip_player.svg") !important;
	background-position: 67% 54% !important;
	background-repeat: no-repeat !important;
	background-size: 50% !important;
}

.vjs-wpstream .vjs-picture-in-picture-control.nitro-lazy {
	background-image: none !important;
}

/* Keep the fullscreen icon the same size on hover (no zoom). */
.vjs-wpstream .vjs-fullscreen-control:hover {
	background-size: 40% !important;
}

/* Hide the default Video.js fullscreen glyph so only our SVG shows. */
.vjs-wpstream .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-wpstream .vjs-icon-fullscreen-enter:before {
	content: "";
	display: none;
}

/* Placeholder rule for the fullscreen-exit glyph (intentionally empty). */
.vjs-wpstream.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-wpstream .vjs-icon-fullscreen-exit:before {}

/* Time display: vertical line-height alignment. */
.vjs-wpstream .vjs-time-control {
	line-height: 44px;
	line-height: 3em;
}

/* Centre big "play" button: subtle grey border. */
.vjs-wpstream .vjs-big-play-button {
	border: .06666em solid #595656;
}

/* Volume panel: animate width and reserve space. */
.video-js.vjs-default-skin .vjs-volume-panel {
	transition: width 1s;
	width: 4em;
}

/* On hover, expand the mute control within the volume panel. */
.video-js.vjs-default-skin .vjs-volume-panel:hover .vjs-mute-control {
	width: 4em;
}