@import "src/css/alvadi/variables";
.test--aip-overlay {
	background: rgba(255,255,255,0.95);
	position: fixed; top: 0; left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 16px;

	visibility: hidden;
	opacity: 0;
	left: -200%;
	.test--aip-overlay__controls {
		position: absolute; top: 8px; right: 8px;
		display: flex;
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			margin-left: 4px;
		}
		.closer {
			background: rgba(0,0,0,.75);
			position: relative;
			top: auto; left: auto; right: auto;
			width: 20px;
			height: 20px;
			@include border-radius(3px);
			&:before, &:after {
				background: rgba(255,255,255,1);
				width: 80%;
			}
		}
	}
	.test--aip-overlay__image {
		position: relative;
		flex-grow: 1;
		.imageBox {
			position: absolute; top: 50%; left: 50%;
			display: inline-block;
			max-width: 100%;
			max-height: 100%;
			@include transform(translateX(-50%) translateY(-50%));
		}
		.image {
			display: block;
			max-width: 100%;
		}
	}
	.test--aip-overlay__gallery {
		padding-top: 16px;
		.test--aip-overlay__carousel {
			.carousel__prev, .carousel__next {
				position: absolute; top: 50%;
				display: block;
				font-size: 120px;
				color: rgba(0,0,0,.25);
				@include transform(translateY(-50%));
				&:hover {
					color: $blue;
					cursor: pointer;
				}
			}
			.carousel__prev {
				left: 16px;
			}
			.carousel__next {
				right: 16px;
			}
			.carousel__list {
				display: flex;
				justify-content: center;
				margin: 0;
				padding: 0;
				list-style: none;
				li {
					padding-left: 8px;
					padding-right: 8px;
					a {
						background-position: 50% 50%;
						background-repeat: no-repeat;
						background-size: contain;
						border: 1px solid rgba(0,0,0,.1);
						display: block;
						width: 80px;
						img {
							display: block;
							width: 100%;
						}
						&:hover, &.active {
							border-color: $blue;
						}
					}
				}
			}
		}
	}
	.test--aip-overlay__footer {
		padding-top: 16px;
		text-align: center;
		.btn {
			padding: 8px 24px 10px;
		}
	}
}

.test--aip-body-overlay {
	overflow: hidden;
	.test--aip-overlay {
		visibility: visible;
		opacity: 1;
		left: 0;
	}
}