/**
 * @author Valentin Alisch, Off Office <hallo@valentinalisch.de>
 * @version 1.0
 *
 * Rettberg Module: Video
 */

.video {
	--video-control-size: 2em;
}

.video .slash {
	margin: 0 0.15em;
}



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

video-viewer__play {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	pointer-events: all;
	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
}

	video-viewer__play i {
		padding: 1.25em;
		background: var( --header-background );
		border-radius: calc( var( --header-radius ) * 0.75 );

		-webkit-backdrop-filter: blur( var( --header-blur ) );
		backdrop-filter: blur( var( --header-blur ) );
	}

	video-viewer__play i::before {
		display: block;
		margin-left: 0.1em;
		margin-bottom: -0.05em;
	}

video-wrap:not( [data-state=""] ):not( [data-state="loaded"] ) video-viewer__play {
	display: none;
}

video-controls {
	background: var( --background-color );
	margin-top: 0.15em;
	overflow: hidden;
}

video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 20;
	padding: 0.1em 0.2em;

	background: transparent;
	color: var( --background-color );
	mix-blend-mode: difference;
}

video-wrap[data-state=""] video-controls,
video-wrap[data-state="loaded"] video-controls,
video-wrap[data-state="playing"][data-is-inactive="true"] video-controls {
	display: none;
}

video-control {
	width: var( --video-control-size );
	height: var( --video-control-size );
	display: flex;
	justify-content: center;
	align-items: center;
}

/*video-control[data-is-fullscreen="false"][data-action="play"],
video-control[data-is-fullscreen="false"][data-action="pause"] {
	margin-left: -0.58em;
}*/

video-control[data-action="maximize"] {
	margin-right: 0.12em;
}

video-control[data-action="maximize"] {
	margin-right: 0.1em;
}

/*
video-wrap:not( [data-is-fullscreen="false"] ) video-control[data-action="maximize"] {
	margin-right: -0.45em;
}*/

	video-control i {
		font-size: 0.95em !important;

		-webkit-text-stroke: 0.008em currentColor;
		-moz-text-stroke: 0.008em currentColor;
		text-stroke: 0.008em currentColor;
	}

video-progress {
	align-items: center;
	margin: 0 calc( var( --video-control-size ) * 0.25 );
}

video-progress-bar {
	position: relative;
	height: calc( var( --video-control-size ) * 0.5 );
	margin-right: calc( var( --video-control-size ) * 0.5 );
}

video-progress-bar::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 0.05em;
	background: currentColor;
}

video-progress-bar::after {
	left: calc( var( --video-progress, 0 ) * 100% );
	width: 0.1em;
	background: currentColor;
}



/*.video-inner {
	padding-top: 56.25%;
	position: relative;
}



.video__markup {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

	.video__markup > iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		opacity: 1;
		transition: none;
	}*/