@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;

	label{
		display: block;

		margin-top: 2em;
		margin-bottom: .7em;

		font-size: .7em;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	input,
	.select-box{
		display: block;

		padding: .7em 1em;
		margin-bottom: .5em;

		border: 1px solid #222;
		border-radius: 3px / 3px;

		background-color: #313339;

		color: #fff;

		transition: border-color .1s ease-in-out;

		&:hover{ border-color: #111; }
		&:focus{ border-color: #7289da; }

	}

	.select-box[data-type]{
		padding-left: 4em;

		cursor: pointer;

		transition: background-color .1s ease-in-out,
					border-color 0s;

		// {1} Trailing icon //
		&:before{
			content: '';

			display: inline-block;
			position: absolute;
				margin-top: .1em;
				margin-left: -1.65em;
				width: 1.3em;
				height: 1.3em;

			background: center center no-repeat;
			background-size: auto 80%;
		}

		// specific images
		&[data-type='text']:before{  background-image: url('../asset/svg/dialog.text@active.svg');  }
		&[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice@active.svg'); }


		// {2} Checkbox //
		&:after{
			content: '';

			display: block;
			position: absolute;
				margin-top: -1.4em;
				margin-left: -3.4em;
				width: 1.3em;
				height: 1.3em;

			border: 1px solid #888;
			border-radius: 3px / 3px;

			background: center center no-repeat;
			background-size: auto 80%;

		}


		// {3} Active item //
		&[data-selected='1']{
			background-color: $main;
			border-color: $main;
			&:hover{ border-color: $main; }

			&:after{
				border-color: #fff;
				background-color: #fff;
				background-image: url('../asset/svg/checked.svg');
			}

		}


	}

}


/* (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;
	}

	& > button:nth-child(2){

		padding: .8em 1.5em;

		border: 0;
		border-radius: 3px / 3px;

		background-color: $main;

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

		cursor: pointer;

		transition: background-color .1s ease-in-out;

		&:hover{ background-color: darken($main, 5%);}
		&:active{ background-color: darken($main, 10%);}
	}
}