@import 'constants';

/* [4] Popup background - window
==========================================*/
#POPUP{
	display: none;
	position: fixed;
		top: 50%;
		left: 50%;
		min-width: 50%;
		max-width: 50%;
		min-height: 30%;
		max-height: 50%;

	// flex properties
	flex-direction: column;
	justify-content: space-between;

	border-radius: 5px;

	background: $bg-color;
	color: $secondary-color;

	box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);

	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	z-index: 1000;

	&.active{
		display: flex;
	}


	& > .header{
		display: block;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		border-radius: 5px 5px 0 0;
		border-bottom: 2px solid darken($bg-color, 5%);

		font-size: 1.1em;
		font-weight: bold;

		color: $primary-color;
	}

	& > .body{
		display: block;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		b, strong{
			color: $primary-color;
		}
	}

	& > .footer{
		display: flex;
		position: relative;
			width: calc( 100% - 2*1em );

		padding: 1em;

		background-color: darken($bg-color, 5%);

		border-radius: 0 0 5px 5px;

		// flex props.
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;

		& button{
			left: auto;
			margin: 0 1em;
			-webkit-transform: none;
			transform: none;
		}

	}
}


#POPUP-BG{
	display: none;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	background: #29333f;
	background: rgba(41, 51, 63, .8);

	z-index: 999;
}

#POPUP.active ~ #POPUP-BG{
	display: block;
}