@import "src/css/alvadi/variables";

#debug {
	background: rgba(0,0,0,.5);
	position: fixed; top: 0; right: 0;
	z-index: 9999;
	padding: 16px 32px;
	color: $white;
}

.aipOverlayBox {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	overflow-y: auto;
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	z-index: 999;
	.aob-header {
		.aob-header__controls {
			display: flex;
			justify-content: flex-end;
			margin: 0;
			padding: 0;
			list-style: none;
			li {}
			.action, a.action, .action a {
				//background: rgba(0,0,0,.075);
				border: 0;
				display: block;
				width: 48px;
				height: 48px;
				font-size: 20px;
				line-height: 44px;
				color: #333;
				text-align: center;
				&:hover {
					background: rgba(0,0,0,.25);
				}
			}
		}
	}
	.aob-body {
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		justify-content: center;
		flex-grow: 1;
		padding: 16px;
		@media(max-width: 767px){
			padding: 16px 0;
		}
	}
	.aob-footer {
		padding: 0 16px 16px;
		text-align: center;
		.btn {
			padding-left: 48px;
			padding-right: 48px;
		}
	}

	.aob-media {
		display: none;
		max-width: 100%;
		max-height: 100%;
		&.in {
			display: block;
		}
	}

	&._white {
		background: rgba(255,255,255,.97);
		color: $black;
	}
	&._black {
		background: rgba(0,0,0,.9);
		color: $white;
	}
}

.aip-rotate-box {
	position: relative;
	.aip-preloader-list {
		position: absolute; top: 0; right: 0;
		overflow: hidden;
		display: flex;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		opacity: 0;
		visibility: hidden;
		img {
			display: block;
			width: 100%;
		}
	}
	.aip-rotate-preloader {
		position: absolute; top: 24px; left: 24px;
		z-index: 55;
		display: none;
		.number {
			position: relative; z-index: 5;
			display: block; width: 80px; height: 80px;
			font-size: 18px;
			line-height: 80px;
			text-align: center;
		}
		.progress {
			border: 6px solid $green;
			border-bottom-color: transparent;
			position: absolute; top: 50%; left: 50%;
			display: block; width: 80px; height: 80px;
			margin: -40px 0 0 -40px;
			@include border-radius(50%);
			animation: rotate 1.5s linear infinite;
			-webkit-animation: rotate 1.5s linear infinite;
			@keyframes rotate {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
			@-webkit-keyframes rotate {
				0% { @include transform(rotate(0deg)); }
				100% { @include transform(rotate(360deg)); }
			}
		}
		&.in {
			display: block;
		}
	}
}