/*
* CSS styling for Popup components.
*/

$pop-height: 80vh;                 // Popup height.
$pop-width: 80%;                   // Popup width.
$pop-top: (100vh - $pop-height)/2; // Popup top space.
$pop-left: (100% - $pop-width)/2;  // Popup left space.

.popup {
	position: fixed;
	display: none;
	flex-direction: column;
	z-index: 1000;

	width: $pop-width;
	height: $pop-height;
	top: $pop-top;
	left: $pop-left;

	padding: 0;
	margin: 0;
	background-color: $white;
	border: 1px solid $gray-2;
	border-radius: 3px;

	.row {
		margin: 0;
	}
}

.popup-bar-row {
	flex: 0 0 auto;
	.popup-bar {
		height: 100%;
		margin-top: $s2;
	}
}

.popup-content-row {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
	.popup-content {
		height: 100%;
		overflow: hidden;
		padding: $s1 {
			bottom: $s3;
		};
	}
}

.popup-visible {
	display: flex !important;
}