/**
 * @author Valentin Alisch <hallo@valentinalisch.de>
 * @version 1.2
 *
 * Video.css
 */



/**
 * Wrap
 * 
 * @since 1.0
 */
video-wrap,
.video-wrap {
	--video-ratio--default: 1.7777777777;
	--video-padding-top--default: 56.25%;
	--video-safezone: 1px;

	display: flex;
	overflow: hidden;
	position: relative;
	flex-direction: column;
	justify-content: center;
	background: var( --video-background, transparent );
	width: 100%;
}

	video-wrap *,
	.video-wrap * {
		-webkit-user-select: none;
		-moz-user-select: none;
		user-select: none;

		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}



/**
 * Viewer
 * 
 * @since 1.0
 */
video-viewer,
.video-viewer {
	display: block;
	position: relative;
	overflow: hidden;
	z-index: 10;

	width: 100%;
	max-width: calc( 100vh * var( --video-ratio, var( --video-ratio--default ) ) );
}

video-viewer__block,
.video-viewer__block {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;

	pointer-events: all;
}

video-viewer__frame,
.video-viewer__frame {
	display: block;
	pointer-events: none;
	position: relative;
	width: 100%;
	padding-top: calc( var( --video-padding-top, var( --video-padding-top--default ) ) + var( --video-safezone ) * -2 );
	z-index: 10;
}

	video-viewer__frame > iframe,
	.video-viewer__frame > iframe,
	video-viewer__frame > video,
	.video-viewer__frame > video {
		position: absolute;
		top: -100vh;
		left: calc( var( --video-safezone ) * -1 );
		width: calc( 100% + var( --video-safezone ) * 2 );
		height: calc( 100% + 200vh );
	}



/**
 * Controls
 * 
 * @since 1.0
 */
video-controls,
.video-controls {
	display: flex;
}

video-control,
.video-control {
	cursor: pointer;
	pointer-events: all;
	flex-shrink: 0;
}



video-wrap[data-state="buffering"] video-control[data-action="play"],
.video-wrap[data-state="buffering"] video-control[data-action="play"],
video-wrap[data-state="buffering"] .video-control[data-action="play"],
.video-wrap[data-state="buffering"] .video-control[data-action="play"],
video-wrap[data-state="playing"] video-control[data-action="play"],
.video-wrap[data-state="playing"] video-control[data-action="play"],
video-wrap[data-state="playing"] .video-control[data-action="play"],
.video-wrap[data-state="playing"] .video-control[data-action="play"] {
	display: none;
}

video-wrap[data-state=""] video-control[data-action="pause"],
.video-wrap[data-state=""] video-control[data-action="pause"],
video-wrap[data-state=""] .video-control[data-action="pause"],
.video-wrap[data-state=""] .video-control[data-action="pause"],
video-wrap[data-state="loaded"] video-control[data-action="pause"],
.video-wrap[data-state="loaded"] video-control[data-action="pause"],
video-wrap[data-state="loaded"] .video-control[data-action="pause"],
.video-wrap[data-state="loaded"] .video-control[data-action="pause"],
video-wrap[data-state="paused"] video-control[data-action="pause"],
.video-wrap[data-state="paused"] video-control[data-action="pause"],
video-wrap[data-state="paused"] .video-control[data-action="pause"],
.video-wrap[data-state="paused"] .video-control[data-action="pause"],
video-wrap[data-state="ended"] video-control[data-action="pause"],
.video-wrap[data-state="ended"] video-control[data-action="pause"],
video-wrap[data-state="ended"] .video-control[data-action="pause"],
.video-wrap[data-state="ended"] .video-control[data-action="pause"],
video-wrap:not( [data-state] ) video-control[data-action="pause"],
.video-wrap:not( [data-state] ) video-control[data-action="pause"],
video-wrap:not( [data-state] ) .video-control[data-action="pause"],
.video-wrap:not( [data-state] ) .video-control[data-action="pause"] {
	display: none;
}

video-wrap[data-is-muted="true"] video-control[data-action="mute"],
.video-wrap[data-is-muted="true"] video-control[data-action="mute"],
video-wrap[data-is-muted="true"] .video-control[data-action="mute"],
.video-wrap[data-is-muted="true"] .video-control[data-action="mute"],
video-wrap:not( [data-is-muted] ) video-control[data-action="mute"],
.video-wrap:not( [data-is-muted] ) video-control[data-action="mute"],
video-wrap:not( [data-is-muted] ) .video-control[data-action="mute"],
.video-wrap:not( [data-is-muted] ) .video-control[data-action="mute"] {
	display: none;
}

video-wrap[data-is-muted="false"] video-control[data-action="unmute"],
.video-wrap[data-is-muted="false"] video-control[data-action="unmute"],
video-wrap[data-is-muted="false"] .video-control[data-action="unmute"],
.video-wrap[data-is-muted="false"] .video-control[data-action="unmute"] {
	display: none;
}

video-wrap[data-is-fullscreen="true"] video-control[data-action="maximize"],
.video-wrap[data-is-fullscreen="true"] video-control[data-action="maximize"],
video-wrap[data-is-fullscreen="true"] .video-control[data-action="maximize"],
.video-wrap[data-is-fullscreen="true"] .video-control[data-action="maximize"] {
	display: none;
}

video-wrap[data-is-fullscreen="false"] video-control[data-action="minimize"],
.video-wrap[data-is-fullscreen="false"] video-control[data-action="minimize"],
video-wrap[data-is-fullscreen="false"] .video-control[data-action="minimize"],
.video-wrap[data-is-fullscreen="false"] .video-control[data-action="minimize"],
video-wrap:not( [data-is-fullscreen] ) video-control[data-action="minimize"],
.video-wrap:not( [data-is-fullscreen] ) video-control[data-action="minimize"],
video-wrap:not( [data-is-fullscreen] ) .video-control[data-action="minimize"],
.video-wrap:not( [data-is-fullscreen] ) .video-control[data-action="minimize"] {
	display: none;
}



/**
 * Progress
 * 
 * @since 1.0
 */
video-progress,
.video-progress {
	display: flex;
	flex: 1;
}

video-progress-bar,
.video-progress-bar {
	flex: 1;
	cursor: pointer;
	pointer-events: all;
	position: relative;
}

video-progress-bar::after,
.video-progress-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc( var( --video-progress, 0 ) * 100% );
	background: var( --video-progress-background, black );
}