// More info: http://workarounds.seotoaster.com/html.html#Pop-up
.popup-overlay when (@popup = true) {
	position       : fixed;
	z-index        : 25;
	top            : 0;
	left           : 0;
	right          : 0;
	bottom         : 0;
	opacity        : 0;
	pointer-events : none;
	.rgba(@body-bg, 95);
	.flexbox();
	.flex-align(center);

	&:target {
		opacity        : 1;
		pointer-events : initial;

		._popup {
			opacity : 1;
		}
	}

	._popup {
		width            : @grid-container-width;
		margin           : auto;
		background-color : @body-bg;
		opacity          : 0;
		.box-shadow(0 0 27px rgba(0, 0, 0, 0.13));
		.transition(all 0.3s linear);
	}

	._header {
		min-height : 40px;
		padding    : 13px 15px;

		&::after {
			content : "";
			display : table;
			clear   : both;
		}

		._title {
			float       : left;
			font-size   : 14px;
			line-height : 1;
			color       : @gray-light;
			font-weight : bold;
		}

		[class*="icon"] {
			display     : block;
			line-height : 1;
			float       : right;
			margin      : 0;
			font-size   : 12px;
			//.transition();
			.link-color(@gray-light; @gray-darker);
		}
	}

	._content {
		padding : 0 15px 30px;

		&::after {
			content : "";
			display : table;
			clear   : both;
		}
	}
}