// ============================================================================
// :: Modal
// ============================================================================
.m-modal {
	z-index: $z-index-highest + 2;

	display: block;
}

// ============================================================================
// :: Components
// ============================================================================
.m-modal__overlay {
	position: fixed;
	top: 0;
	right: 0;
	z-index: $z-index-highest + 3;

	width: 100vw;
	height: 100vh;
	overflow-y: scroll;

	background: $overlay-gradient;

	opacity: 0;

	transition: opacity 0.4s ease-in-out 0.2s;

	pointer-events: none;
}

.m-modal__container {
	position: fixed;
	top: 0;
	right: 0;
	z-index: $z-index-highest + 4;

	width: 100vw;
	height: 100vh;
	overflow-y: scroll;

	background-color: $background-color-white;
	box-shadow: $box-shadow;

	opacity: 0;

	transform: translateX(100%);

	transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out 0.2s;

	pointer-events: none;

	@include respond-at($screen-small-base) {
		top: 50%;
		left: 50%;

		width: 80vw;
		height: initial;
		padding: 0;

		transform:
			translateX(-50%)
			translateY(-50%)
			scale(0.9);
	}

	@include respond-at($screen-medium-base) {
		width: 100rem;
		height: initial;
		max-height: 90%;
	}
}

.m-modal__close {
	text-decoration: underline;
}

.m-modal__content {
	width: 100%;
}

.m-modal {

	.m-video__container {
		width: 100%;
	}
}

.m-modal__video-container {

	position: relative;

	height: 0;
	overflow: hidden;
	padding-top: 3rem;
	padding-bottom: 56.25%;

	iframe,
	object,
	embed {
		position: absolute;

		top: 0;
		left: 0;

		width: 100%;
		height: 100%;
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-modal--spacing {

	.m-modal__container {
		padding: 5rem 0;
	}
}

// ============================================================================
// :: States
// ============================================================================
.m-modal {

	&.is-open {

		.m-modal__overlay {

			opacity: 1;

			pointer-events: visible;
		}

		.m-modal__container {

			opacity: 1;

			transform: translateX(0%);

			pointer-events: visible;

			@include respond-at($screen-small-base) {
				transform:
					translateX(-50%)
					translateY(-50%)
					scale(1);
			}
		}
	}
}