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

.overlay {
	--overlay-transition-duration: 0.25s;
	--overlay-transition-easing: linear;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	z-index: 1000;
	padding: var( --outer-spacing );
	background: var( --overlay-background );

	opacity: 0;
	pointer-events: none;
	-webkit-overflow-scrolling: touch;

	/*transition: opacity var( --overlay-transition-duration ) var( --overlay-transition-easing );
	transition-delay: var( --overlay-transition-duration );*/
}

.overlay.active {
	pointer-events: all;
	opacity: 1;
	transition-delay: 0s;
}

.overlay.is-notice {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2000;
}

	.overlay.is-notice > * {
		flex: 1;
	}

.overlay.does-blur {
	background: var( --overlay-background--blurred );
	
	-webkit-backdrop-filter: blur( var( --overlay-blur ) );
	backdrop-filter: blur( var( --overlay-blur ) );
}



.overlay-content {
	position: relative;
	opacity: 0;
	/*transition: opacity var( --overlay-transition-duration ) var( --overlay-transition-easing );*/
}

.overlay.active .overlay-content {
	opacity: 1;
	/*transition-delay: var( --overlay-transition-duration );*/
}

.overlay.is-notice .overlay-content {
	padding: calc( var( --outer-spacing ) * 1.6 ) calc( var( --outer-spacing ) * 2 ) calc( var( --outer-spacing ) * 1.6 );
	background: var( --background-color );
	border-radius: 10px;
	text-align: center;
}



.overlay-content__content {
	/*display: flex;
	flex-direction: column;*/
}

	.overlay.is-reversed .overlay-content__content {
		display: flex;
		flex-direction: column-reverse;
	}

	.overlay-content__content a,
	.overlay-content__content button,
	.overlay-content__content .button {
		margin-top: calc( var( --spacing--tiny ) * 2 );
	}

	.overlay-content__content a:not( .button ) {
		display: inline;
	}



.overlay__closer {
	position: absolute;
	top: 0.25em;
	right: 0.25em;
	padding: 10px;

	cursor: pointer;
	pointer-events: none;
	z-index: 20;
}

.overlay.active .overlay__closer {
	pointer-events: all;
}

	.overlay__closer > img {
		display: block;
		width: 0.85em;
		height: 0.8em;
	}