// =============================================================================
// :: Pop-up
// =============================================================================
.c-pop-up {
	position: absolute;
	top: 0;
	left: 0;

	z-index: $z-index-atmosphere;

	width: 100%;
	height: 100%;

	opacity: 0;

	transition: opacity 0.3s ease-in-out;

	pointer-events: none;

	&::after {
		content: "";

		position: fixed;
		top: 0;
		left: 0;

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

// =============================================================================
// :: Elements
// =============================================================================
.c-pop-up__header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	margin-bottom: 4rem;
}

.c-pop-up__container {
	position: relative;

	top: 0;
	left: 0;

	z-index: $z-index-atmosphere + 1;

	max-width: 85rem;
	height: 100%;

	margin-top: 15rem;
	margin-right: auto;
	margin-left: auto;

	background: none;
}

.c-pop-up__footnote {
	margin-top: 4rem;
	padding: 1rem;

	background-color: $background-color-light;
	border-radius: 1rem;
}

.c-pop-up__footnote-result {
	float: right;

	font-weight: 700;
}

.c-pop-up__submit {
	margin-top: 4rem;

	text-align: center;

	@include respond-at(get-breakpoint("tablet")) {
		text-align: right;
	}
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-pop-up--dark {

	&::after {
		background: $background-color-blue;
	}
}

// =============================================================================
// :: States
// =============================================================================
.c-pop-up {

	&.is-open {
		overflow: hidden;

		opacity: 1;

		pointer-events: auto;
	}
}