@import 'library.less';

#popup {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,00);
	pointer-events: none;
	z-index: 0;
	overflow-y: auto;
	visibility: hidden;
	.transition;
	
	.popup-container {
		position: relative;
		width: 1000px;
		margin: 60px auto;
		opacity: 0;
		min-height: 140px;
		background-color: #F1F1F1;
		.transition;
		.translate(0, 100px);
		
		.close {
			position: absolute;
			right: 30px;
			top: 30px;
			background: url(../images/popup-close.png) no-repeat center center;
			width: 30px;
			height: 30px;
			cursor: pointer;
			z-index: 5;
		}
		.preloader {
			display: none;
			width: 32px;
			height: 32px;
			background: #F1F1F1 url(../images/preloader.gif) no-repeat center center;
			.absolute-center;
			z-index: 2;
			
			&.shown {
				display: block;
			}
		}
		.content {
			position: relative;
		}
	}
	
	&.shown {
		z-index: 1000;
		pointer-events: auto;
		background: rgba(0,0,0, 0.7);
		visibility: visible;
		
		.popup-container {
			.transition(@delay: 400ms);
			opacity: 1;
			.translate(0, 0px);
		}
	}
}