/**
 * @author alisch berlec hönow <info@abh.eu>
 * @version 4.6.6
 *
 * Mdj View: Stream
 */
body.is-stream,
#stream {
	--material-width: 100%;
	--transition-duration: 0.75s;
	--transition-easing: cubic-bezier( 0.76, 0, 0.24, 1 );

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;
	z-index: 2000;

	background: black;
}



#stream__material {
	position: fixed;
	top: 0;
	left: 0;
	width: var( --material-width );
	height: 100%;
	z-index: 5;

	-webkit-transform: translateX( -100% );
	-moz-transform: translateX( -100% );
	transform: translateX( -100% );
}

#stream.material-is-active #stream__material {
	-webkit-transform: translateX( 0 );
	-moz-transform: translateX( 0 );
	transform: translateX( 0);
}

#stream__material-inner {
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;

	padding: calc( var( --stream-header-height, 0 ) + var( --v-sp ) * 2 ) var( --h-sp ) var( --v-sp );
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;

	/*display: flex;
	flex-direction: column;
	justify-content: center;*/
}

#stream__material-inner::-webkit-scrollbar {
	display: none;
}

.is-ready #stream__material,
.is-ready #stream__video {
	transition: -webkit-transform var( --transition-duration ) var( --transition-easing ),
				-moz-transform var( --transition-duration ) var( --transition-easing ),
				transform var( --transition-duration ) var( --transition-easing ),
				padding var( --transition-duration ) var( --transition-easing ),
				width var( --transition-duration ) var( --transition-easing ),
				right var( --transition-duration ) var( --transition-easing )
				;

}



#stream__material-toggle {
	--transition-duration: 0.75s;

	position: fixed;
	bottom: 0.35em;
	left: var( --video-control-spacing );
	z-index: 15;
}

	#stream__material-toggle .button {
		--button-background: black;
		--button-border-radius: 0.25em;
	}

	#stream__material-toggle .button__background {
		border: none;
	}

	#stream.material-is-active #stream__material-toggle .button__label i::before {
		content: '\F00C';
	}

	#stream.material-is-active #stream__material-toggle .button__annotation {
		opacity: 0;
	}

	.is-ready #stream__material-toggle .button__annotation {
		transition: opacity var( --transition-duration ) linear;
	}



#stream__video {
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

#stream__video,
#stream__video .video,
#stream__video .video-inner,
#stream__video video-wrap {
	height: 100%;
}

#stream.material-is-active #stream__video video-wrap:not( [data-is-fullscreen="true"] ) video-controls {
	opacity: 1;
}

#stream.has-material:not( .material-is-active ) #stream__video video-wrap:not( [data-is-fullscreen="true"] ) video-controls {
	padding-left: calc( var( --stream-material-toggle-width, 0 ) + var( --video-control-spacing ) * 2 );
}



#stream__header {
	--transition-duration: 0.5s;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2100;
}

.is-ready #stream__header,
.is-ready #stream__material-toggle {
	transition: opacity var( --transition-duration ) linear;
}

#stream.boarding-completed[data-is-inactive="true"][data-state="playing"]:not( .material-is-active ) + #stream__header,
#stream.boarding-completed[data-is-inactive="true"][data-state="playing"]:not( .material-is-active ) #stream__material-toggle {
	opacity: 0;
}

#stream.boarding-completed[data-is-inactive="false"] + #stream__header,
#stream.boarding-completed[data-is-inactive="false"] #stream__material-toggle {
	--transition-duration: 0.125s;
}

	#stream__header #control-center {
		padding-bottom: 0;
	}



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

	#stream.has-material.material-is-active #stream__video {
		right: -100%;
	}
}

@media ( min-width: 700px ) {

	#stream {
		--material-width: 50%;
	}

	#stream__material-inner {
		padding: var( --v-sp ) calc( var( --h-sp ) * 0.5 ) var( --v-sp ) var( --h-sp );
	}

	#stream.has-material.material-is-active #stream__video {
		width: calc( 100% - var( --material-width ) );
		padding: 0 var( --h-sp ) 0 calc( var( --h-sp ) * 0.5 );
	}

	#stream.has-material.material-is-active #stream__video video-wrap:not( [data-is-fullscreen="true"] ) video-controls {
		width: calc( 100% + var( --video-control-spacing ) + var( --h-sp ) * 1 );
		margin-left: calc( var( --h-sp ) * -0.5 );
	}
}



/* ------------------------- */
@media ( min-width: 1000px ) {

	#stream {
		--material-width: 33.3333333333%;
	}
}



/* ------------------------- */
@media ( min-width: 1200px ) {

	#stream {
		--material-width: 25%;
	}
}