// ============================================================================
// :: POPUP
// ============================================================================
.m-popup {
	position: fixed;
	top: 0;
	right: 0;

	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	padding: 5rem 4rem;

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

	opacity: 0;

	transform: translateX(100%);

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

	@include respond-at($screen-medium-base) {
		width: 70vw;
	}

	@include respond-at($screen-large-base) {
		width: calc(100vw / 5 * 2);
		max-width: 70rem;
	}
}

// ============================================================================
// :: Components
// ============================================================================
.m-popup__close-container {
	position: absolute;
	top: 4rem;
	right: 3rem;

	padding: 0 0 3rem 3rem;

	&:hover {
		cursor: pointer;

		.m-popup__close {
			transform: translateX(-50%) translateY(-50%) rotate(90deg);
		}
	}
}

.m-popup__close {
	border: none;
	background-color: transparent;
	color: $text-color-grey;

	transform: translateX(-50%) translateY(-50%);
	transform-origin: center center;

	transition: transform 0.3s ease-in-out;

	cursor: pointer;
}

.m-popup__content {
	width: 90%;
}

.m-popup__title {
	margin-bottom: 2rem;
}

.m-popup__text {
	margin-bottom: 2rem;
}

// ============================================================================
// :: States
// ============================================================================
.m-popup {
	z-index: $z-index-highest + 3;

	&.is-open {
		z-index: $z-index-highest + 3;

		opacity: 1;

		transform: translateX(0%);
	}
}