/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */

/*
 *	Overlay base
 */
.wb-overlay {
	background-clip: border-box;
	background-color: $overlay-background-color;
	border: 0;
	border-radius: 0;
	display: none;
	// Push the element onto the GPU stack
	transform: translateZ(0);
	z-index: 1050;

	&.wb-inview {
		display: block;
	}

	&.open {
		display: inline-block;
		position: fixed;
	}
}

%overlay-panel {
	height: 100%;
	max-width: 90%;
	top: 0;
}

%overlay-bar {
	border-bottom: 0;
	left: 0;
	max-height: 90%;
	min-width: 100%;
}

%overlay-popup {
	max-height: 90%;
	max-width: 90%;
}

/*
 *	Overlay styles
 */
.wb-panel-l {
	@extend %overlay-panel;
	left: 0;
}

.wb-panel-r {
	@extend %overlay-panel;
	right: 0;
}

.wb-bar-t {
	@extend %overlay-bar;
	top: 0;
}

.wb-bar-b {
	@extend %overlay-bar;
	bottom: 0;
}

.wb-popup-mid {
	@extend %overlay-popup;
	border-radius: 6px;
	bottom: 0;
	left: 0;
	margin: auto;
	right: 0;
	top: 0;
	width: 90%;
}

.wb-popup-full {
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}

.mfp-bg {
	opacity: .97;
}

.wb-overlay-dlg {
	.overlay-bg {
		box-shadow: 0 0 1000px 1000px black;
	}
}

/*
 *	Overlay parts
 */
.overlay-def {
	overflow-y: auto;

	header {
		background-color: $overlay-header-background-color;
		color: $overlay-header-color;
		display: block;
		padding: 0 44px 0 1em;
	}

	.modal-title {
		font-size: 1.15em;
		padding: 10px 0;
	}

	&.wb-bar-t,
	&.wb-bar-b {
		background-color: $overlay-bar-background-color;
		header {
			background-color: $overlay-bar-background-color;
		}
	}

	.mfp-close {
		color: #fff;
	}
}

.hidden-hd {
	.modal-body {
		padding-top: 50px;
	}

	.overlay-close {
		&:not(.btn) {
			background-color: #000;
			border-radius: 999px;
			height: 1em;
			line-height: 1em;
			margin-right: 20px;
			margin-top: 10px;
			width: 1em;
		}
	}
}

.wb-disable {
	.wb-overlay {
		@extend %global-display-block-important;
	}
}

[dir=rtl] {
	.mfp-close {
		left: 0;
		right: auto;
	}

	.wb-panel-l {
		left: auto;
		right: 0;
	}

	.wb-panel-r {
		left: 0;
		right: auto;
	}

	.overlay-def {
		header {
			padding: 0 1em 0 44px;
		}
	}
}