@import 'constants';

@keyframes popup-show{
	from{ transform: translateX(-50%) translateY(-50%) scale(.8); }
	to{   transform: translateX(-50%) translateY(-50%) scale(1); }
}

@keyframes filter-show{
	from{ opacity: 0; }
	to{   opacity: 1; }
}


/* (0) Popup Filter Background
---------------------------------------------------------*/
#popup-filter-background{
	display: block;
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	z-index: 700;

	background-color: rgba(0,0,0,.8);

	transition: opacity .2s ease-in-out;
	animation: filter-show .2s ease-in-out;
}


/* (1) Popup box
---------------------------------------------------------*/
.popup{
	display: flex;
	position: fixed;
		top: 50%;
		left: 50%;
		width: 440px;
		min-height: 200px;

	flex-direction: column;


	border-radius: 5px / 5px;

	background-color: #36393f;

	overflow: hidden;

	z-index: 800;

	transform: translateX(-50%) translateY(-50%) scale(1);

	transition: transform .2s ease-in-out;
	animation: popup-show .2s ease-in-out;

}


/* (2) Popup HEADER
---------------------------------------------------------*/
.popup > .header{

	display: block;

	margin: 1em 1.3em;

	font-size: .9em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;

}


/* (3) Popup BODY
---------------------------------------------------------*/
.popup > .body{

	flex: 1;

	display: flex;

	margin: 0 1.2em;
	padding-bottom: 1em;

	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;


	a{
		display: inline-block;
		font-size: .8em;
		color: #aaa;

		cursor: pointer;

		&:after{ content: none; }

		&:hover{
			text-decoration: underline;
			color: #fff;
		}
	}

}


/* (4) Popup Footer
---------------------------------------------------------*/
.popup > .footer{

	display: flex;
	position: relative;

	padding: 1.2em 1em;

	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;

	background-color: #2f3136;

	& > button:first-child{

		margin: 0 2em;

		border: 0;
		background-color: transparent;

		color: #fff;
		font-size: .8em;
		font-weight: normal;

		&:hover{ text-decoration: underline; }

		cursor: pointer;
	}

}