// Modal Theme
&.em-modal {
	// Variables
	$speed: 0.3s;
	$delay: ($speed * .5);
	$easing: cubic-bezier(.55, 0, .1, 1);

	// Overlay -- only show for tablet and up
	@media only screen and (min-width: 40rem) {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		padding: 40px !important;
		margin: 0 !important;
		z-index: 99998 !important;
		background: rgba(#000, 0.6) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		backface-visibility: hidden !important;
		transition: all $speed $easing !important;
		-webkit-transition: all $speed $easing !important;
		pointer-events: none;
		touch-action: none;

		&.active {
			opacity: 1 !important;
			visibility: visible !important;
			backdrop-filter: blur(4px);
			pointer-events: auto;
			touch-action: auto;
		}
	}

	@media only screen and (max-width: 40rem) {
		display : none !important;
		visibility: hidden !important;
		&.active {
			display: block !important;
			visibility: visible !important;
		}
	}

	// repeated rules for the popup or if wrapped by a form (so that scrolling is possible)
	@mixin popup-sizing() {
		margin: 0 auto !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 780px !important;
		min-height: 200px !important;
		max-height: calc(100vh - 80px) !important;
	}

	> form { // forms can be wrapped around modal-popup
		@include popup-sizing();
		border: none !important;
		background: none !important;
	}

	// Modal main window
	.em-modal-popup {
		@include popup-sizing();
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-items: center !important;
		justify-content: start !important;
		position: relative !important;
		background-color: #fff !important;
		border-radius: 3px !important;
		opacity: 0 !important;
		visibility: hidden !important;
		box-shadow: 0 2px 10px rgba(#000, 0.1) !important;
		backface-visibility: hidden !important;
		transform: scale(1.2) !important;
		transition: all $speed $easing !important;
		transition-delay: $delay !important;
		z-index: 99999 !important;
		pointer-events: none;
		touch-action: none;

		&.active {
			visibility: visible !important;
			opacity: 1 !important;
			transform: scale(1) !important;

			.em-modal-content, .em-close-modal {
				opacity: 1 !important;
			}
			pointer-events: auto;
			touch-action: auto;
		}


		// close modal
		header {
			width: 100%;
			border-bottom: 1px solid #dedede;
			margin: 0;
			padding: 10px 0 7px 15px;

			a.em-close-modal {
				display: block;
				width: 28px;
				height: 28px;
				background: var(--icon-close) no-repeat;
				background-size: 28px 28px;
				position: absolute !important;
				cursor: pointer !important;
				top: 10px !important;
				right: 10px !important;
				opacity: 0 !important;
				backface-visibility: hidden !important;
				transition: opacity $speed $easing, visibility $speed $easing !important;
				-webkit-transition: opacity $speed $easing, visibility $speed $easing !important;
				transition-delay: $delay !important;
			}

			.em-modal-title {
				font-size: 24px !important;
				line-height: 1.3 !important;
				padding: 0 32px 0 0 !important;
				margin: 0 !important;

				a {
					color: var(--text-color-normal) !important;

					&:hover {
						text-decoration: underline;
					}
				}
			}
		}

		// content
		.em-modal-content {
			opacity: 0 !important;
			backface-visibility: hidden !important;
			transition: opacity $speed $easing !important;
			transition-delay: $delay !important;
			width: 100% !important;
			margin: 0;
			padding: 20px 15px;
			overflow-y: auto !important;

			&.has-image {
				display: grid;
				grid-template-columns: auto minmax(80px, 150px);
				grid-gap: 40px;

				> div.image {
					text-align: center;
					img {
						width: 100%;
					}
				}
			}

			// basic styling
			section {
				header {
					width: 100%;
					font-size: 18px;
					padding: 16px 0 14px;
					margin: 0;
					border-bottom: 1px solid #dedede;
				}
				> div {
					margin: 15px 0;
				}
			}
		}

		footer {
			width: 100% !important;
			border-top: 1px solid #dedede !important;
			> div {
				padding: 10px 25px !important;
				button, .button {
					margin: 0 !important;
				}
			}
				display: grid;
				grid-template-columns: 1fr 1fr;
				align-items: center;

				div:first-child {
					justify-self: start;
				}
				div:not(:first-child):last-child {
					justify-self: end;
				}
				button.button {
					margin-bottom : 0 !important;
					padding-bottom : 0 !important;
				}
		}

		/**
		 * Mobile styling for popups
		 */
		@media only screen and (max-width: 39.99rem) {
			position: fixed !important;
			top: 0 !important;
			left: 0 !important;
			width: 100% !important;
			height: 100% !important;
			max-height: 100% !important;
			-webkit-overflow-scrolling: touch !important;
			border-radius: 0 !important;
			transform: scale(1.1) !important;
			padding: 0 !important;
			margin: 0 !important;

			.em-modal-content {
				padding: 10px 15px 15px 15px;
			}
		}
	}

	// Styling for event popups, calendar or other
	.em-modal-default {
		&:first-child {
			padding-top: 0;
			margin-top: 0;
		}

		> div {
			margin-bottom: 20px;
		}

		> div:last-of-type {
			margin-bottom: 0;
		}

		.em-event-title {
			a {
				font-size: 18px !important;
				color: var(--text-color-normal) !important;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.em-event-main-info {
			width: 100%;

			&.has-image {
				display: grid;
				grid-template-columns: 3fr 4fr;

				.em-event-image {
					justify-self: end;

					img {
						max-width: 100%;
					}
				}
			}

			.event-title {
				a {
					color: var(--text-color-normal) !important;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			.event-meta-info {

				.em-event-meta {
					display: grid;
					grid-template-columns: 30px 1fr;
				}

				.em-icon {
					opacity: 0.5;
					padding-right: 10px;
				}

				> div {
					margin-bottom: 10px;
				}

				> div:last-of-type {
					margin-bottom: 0;
				}
			}

		}

		.em-event-actions {
			font-size: 14px;
			text-align: center;

			.button {
				padding: 0 20px !important;
			}
		}

		@media only screen and (max-width: 39.99rem) {
			.em-modal-default {
				margin-top: 25px;

				.em-event-main-info {

					.event-meta-info {
						margin-bottom: 20px;
					}

					&.has-image {
						display: block;

						.em-event-image {
							text-align: center;
						}
					}
				}
			}
		}
	}

	&.em-admin-modal {
		--font-size:15px;
		--line-height:20px;
		.em-modal-content p {
			font-size: var(--font-size) !important;
			line-height: var(--line-height) !important;
			text-align: justify;
		}
	}
}