/**
 * @author Valentin Alisch <hallo@valentinalisch.de>
 * @version 2.0.7
 *
 * VideoJS.css
 */



/**
 * Wrap
 * 
 * @since 1.0
 */
video {
	clip-path: fill-box;
}

video-wrap,
.video-wrap {
	--ratio: 1.7777777777;
	--padding-top: calc( 100 / var( --ratio ) * 1% );

	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( var( --video-max-height, 100vh ) * var( --ratio ) );
	padding-top: calc( var( --padding-top ) );
}

video-viewer__block,
.video-viewer__block,
video-viewer__frame,
.video-viewer__frame {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

video-viewer__block,
.video-viewer__block {
	cursor: pointer;
	pointer-events: all;
	z-index: 20;
}

video-viewer__frame,
.video-viewer__frame {
	pointer-events: none;
	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, 1px ) * -1 );
		width: calc( 100% + var( --video-safezone, 1px ) * 2 );
		height: calc( 100% + 200vh );
	}



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

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



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

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

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

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

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

video-wrap[data-is-fullscreen="false"] video-control[data-trigger="vjs:minimize"],
.video-wrap[data-is-fullscreen="false"] video-control[data-trigger="vjs:minimize"],
video-wrap[data-is-fullscreen="false"] .video-control[data-trigger="vjs:minimize"],
.video-wrap[data-is-fullscreen="false"] .video-control[data-trigger="vjs:minimize"],
video-wrap:not( [data-is-fullscreen] ) video-control[data-trigger="vjs:minimize"],
.video-wrap:not( [data-is-fullscreen] ) video-control[data-trigger="vjs:minimize"],
video-wrap:not( [data-is-fullscreen] ) .video-control[data-trigger="vjs:minimize"],
.video-wrap:not( [data-is-fullscreen] ) .video-control[data-trigger="vjs: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;
	position: relative;
}

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