/**
 * @author alisch berlec hönow <info@abh.eu>
 * @version 4.6.6
 *
 * Mdj Component: Video
 */

body {
	--video-control-spacing: 0.5em;
}

.video {}

.video-inner {}



video-wrap {
	--transition-duration: 0.5s;

	align-items: center;
	background: black;
}

video-wrap[data-state="playing"][data-is-inactive="true"],
video-wrap[data-state="playing"][data-is-inactive="true"] video-viewer__block {
	cursor: none;
}

video-viewer__block {
	pointer-events: all;
	cursor: pointer;
}





.is-ready video-controls {
	transition: opacity var( --transition-duration ) linear, padding var( --transition-duration ) linear, margin var( --transition-duration ) linear, width var( --transition-duration ) linear;
}

video-controls {
	position: absolute;
	bottom: 0;
	left: calc( var( --video-control-spacing ) * -0.5 );
	width: calc( 100% + var( --video-control-spacing ) );
	justify-content: space-between;

	padding: 0.35em var( --video-control-spacing );
	z-index: 20;
	opacity: 1;
}

video-wrap[data-state="playing"][data-is-inactive="true"] video-controls {
	opacity: 0;
}

video-wrap[data-state="playing"][data-is-inactive="false"] video-controls {
	--transition-duration: 0.125s;
}



video-control {
	margin: 0 calc( var( --video-control-spacing ) * 0.5 );
}

	video-control .button__background {
		border: none;
	}



video-progress {
	--bar-height: 0.2em;

	align-items: center;
}

video-progress-bar::before {
	content: '';
	position: absolute;
	z-index: 10;
	left: 0;
	top: calc( 50% - var( --bar-height ) * 0.4 );
	width: 100%;
	height: var( --bar-height );
	background: rgba( 233, 233, 233, 0.4 );
	border-radius: var( --bar-height );
}

video-progress-bar::after {
	height: var( --bar-height );
	top: calc( 50% - var( --bar-height ) * 0.4 );
	background: currentColor;
	border-radius: var( --bar-height );
}

video-progress-bar {
	height: 1em;
	margin: 0 calc( var( --video-control-spacing ) + 0.1em ); 
}

video-display {
	margin: 0 var( --video-control-spacing );
}



/* ------------------------- */
@media ( max-width: 699px ) {

	video-display {
		display: none;
	}
}