@use "sass:math";

$modal-close-sm: 26px;
$modal-close-lg: 26px;

html.modal-active {
	overflow-y: hidden;
}

.modal-backdrop {
	z-index: var(--z-above-all);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(var(--color-rgb-black), 0.9);
	transition: opacity calc(var(--default-transition-speed) * 2) var(--default-transition-easing);
	opacity: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;

	html.modal-active & {
		opacity: 1;
		pointer-events: all;
	}
}

.modal {
	position: relative;
	background-color: var(--color-white);
	width: 100%;
	overflow: visible;

	display: flex;
	justify-content: center;

	@include media-min($medium) {
		margin: 0 auto;
		height: auto;
		max-width: 80vw;
		max-height: calc(100% - 16rem);
	}

	@include media-min($large) {
		max-width: 800px;
	}

	&__close {
		z-index: 1;
		position: absolute;
		top: 0;
		right: 0;

		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-primary);
		background: transparent;
		cursor: pointer;

		width: $modal-close-sm;
		height: $modal-close-sm;

		@include media-min($medium) {
			transform: translateY(-100%);
		}

		@include media-min($large) {
			transform: translateY(-110%);
			width: $modal-close-lg;
			height: $modal-close-lg;
		}
	}

	&__close-icon {
		width: 100%;
		height: 100%;
	}

	&__content-container {
		position: relative;
		width: 100%;
		overflow-y: scroll;
	}

	&__loading-container,
	&__content {
		padding: 4rem 2rem;

		@include media-min($large) {
			padding: 6rem 8rem;
		}
	}

	&__loading-container {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		pointer-events: none;
	}

	&.is-loading {
		.modal__loading-container {
			transition: opacity var(--default-transition-speed) var(--default-transition-easing);
			opacity: 1;
			pointer-events: all;
		}

		.modal__content {
			opacity: 0;
			pointer-events: none;
		}
	}
}

/**
 * Video Modal
 */
.modal {
	&__video-container {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;

		width: 100%;
	}

	&__video-embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		max-height: 90vh;
	}

	&__video-cookie {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-color: #b2b0b059;
		display: flex;
		align-items: center;
		justify-content: center;
		&-text {
			background-color: rgb(0, 0, 0);
			color: #fff;
			text-align: center;
			align-items: center;
			padding: 10px 16px;
			font-size: 16px;
			cursor: pointer;
		}
	}

	&__demo-container {
		padding-bottom: calc(56.33% + 27px);
		height: 0;
		position: relative;
		width: 100%;
	}

	&__demo-embed {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}

.modal-video {
	height: auto;
	border-radius: var(--default-border-radius);

	@include media-max($medium) {
		margin-left: 1.6rem;
		margin-right: 1.6rem;

		.modal__close {
			transform: translateY(-100%);
		}
	}

	.modal__content {
		padding: 0;
	}

	.modal__content-container {
		border-radius: var(--default-border-radius);
	}
}

.modal-form {
	max-width: 80vw;
	min-height: 20rem;
	max-height: calc(100% - 16rem);
	@include media-min($medium) {
		max-width: 60rem;
	}
}

.modal-demo {
	.modal__content {
		padding: 0;
	}
}

.modal-tutorial {
	max-width: 80vw;
	min-height: 20rem;
	height: 85vh;
	width: 100%;
	@include media-min($medium) {
		max-width: 100rem;
	}
	.modal__content {
		padding: 0;
		width: 100%;
		height: 100%;
	}
	.modal__tutorial-container {
		width: 100%;
		height: 100%;
	}
}