/*--------------------------------------------------------------
	Module : Modal
	Version : 1.0.0

	.wpeo-modal -> classe de base du mobule
	.modalactive -> lance l'apparition de la modal
	.no-modal-close -> désactive l'icone fermeture
--------------------------------------------------------------*/

.wpeo-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99998;
	background: rgba(39,42,53,.9);
	opacity: 0;
	pointer-events: none;
	@include transition();

	&.modal-active {
		opacity: 1;
		pointer-events: auto;
		.modal-container {
			transform: translate(-50%, -50%);
		}
	}
	&.modal-force-display {
		.modal-close {
			display: none;
		}
	}
}

.wpeo-modal {
	.modal-container {
		position: absolute;
		transition: all 0.2s ease-out;
		width: 100%;
		max-width: 860px;
		height: 100%;
		max-height: 560px;
		background: #fff;
		padding: 2em;
		margin: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -60%);
		@media ( max-width: $media__small ) {
			padding: 1em;
		}
	}

	.modal-container {
		.modal-header {
			height: 10%;
			display: flex;
		}
		.modal-content {
			height: 78%;
		}
		.modal-footer {
			height: 12%;
		}
	}
	.modal-container .modal-header {
		.modal-title, .modal-close {
			margin: auto 0;
		}
		.modal-title {
			text-transform: uppercase;
			font-size: 18px;
			white-space: normal;
			@media ( max-width: $media__medium ) {
				font-size: 16px;
			}
			@media ( max-width: $media__small ) {
				font-size: 14px;
			}
		}
		.modal-close {
			margin-left: auto;
			color: rgba(0,0,0,0.3);
			padding: 4px;
			transition: all 0.2s ease-out;
			&:hover {
				cursor: pointer;
				color: $color__primary;
			}
		}
	}
	.modal-container .modal-content {
		overflow-y: auto;
		font-size: 14px;
		@media ( max-width: $media__small ) {
			font-size: 12px;
		}
	}
	.modal-container .modal-footer {
		text-align: right;
		padding-top: 1em;
		&.left {
			text-align: left;
		}
		&.center {
			text-align: center;
		}
	}
}
