@import "src/css/alvadi/variables";
.alvAdv {}

.alvAdv-options {
	margin-bottom: 24px;

	.alvAdv-options__panel {
		background: $blue_lighter;
		border: 1px solid $blue_lighter;
		display: flex;
		flex-wrap: wrap;
		padding: 16px;
		font-size: 13px;
		@include border-radius();
		&:not(:last-child){
			margin-bottom: 4px;
		}
	}
	.alvAdv-options__menu {
		&:not(:first-child){
			border-left: 1px solid $color_gray_20;
			margin-left: auto;
			padding-left: 16px;
		}
		a {
			border: 0;
			display: block;
			min-height: 100%;
			line-height: 50px;
			font-size: 36px;
			&:hover {
				color: $color_gray_80;
			}
		}
	}
	.alvAdv-options__lang {
		border-left: 1px solid $color_gray_20;
		margin-left: 16px;
		padding-left: 16px;
	}
	.alvAdv-options__params {
		border-left: 1px solid $color_gray_20;
		margin-left: 16px;
		padding-left: 16px;
		/*@media (max-width: 767px) {
			border: 0;
			order: 2;
			width: 50%;
			margin: 0;
			padding: 0;
		}*/
		&.position {
			@media (max-width: 767px) {
				border: 0;
				border-top: 1px solid $color_gray_20;
				order: 2;
				width: 100%;
				margin: 1rem 0 0 0;
				padding: 1rem 0 0 0;
			}
		}
	}
}

.alvAdv-code {
	pre {
		code {
			white-space: -moz-pre-wrap;
			white-space: -pre-wrap;
			white-space: -o-pre-wrap;
			white-space: pre-wrap;
			word-wrap: break-word;
			-moz-tab-size: 1.5rem;
			-o-tab-size: 1.5rem;
			line-height: 1.5;
		}
	}
}

.alvAdv-backdrop {
	background: rgba(0,0,0,.75);
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 9998;
	visibility: hidden;
	opacity: 0;
	@include transition();
}
.alvAdv-menu {
	background: $blue_lighter;
	position: fixed;
	top: 0;
	left: -100%;
	//right: 40px;
	z-index: 9999;
	display: block;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	@include transition();
	.alvAdv-menu__head {
		padding: 8px 16px;
		font-size: 32px;
		font-weight: bold;
		@media( max-width: 767px){
			font-size: 24px;
		}
	}
	.alvAdv-menu__body {
		padding: 16px;
	}
	.alvAdv-menu__list {
		margin: 0 -8px;
		padding: 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		& > li {
			width: 33.3333%;
			margin-bottom: 24px;
			padding: 0 8px;
			@media (max-width: 991px) {
				width: 50%;
			}
			@media (max-width: 575px) {
				width: 100%;
			}
			a {
				border: 0;
				display: block;
				.img-block {
					border: 1px solid $color_gray_20;
					@include box-shadow(0 0 8px rgba(0,0,0,.25));
				}
				&:hover {
					.img-block {
						border: 1px solid $blue;
						@include box-shadow(13 97 171px rgba(0,0,0,.25));
					}
				}
			}
			&.active {
				a {
					border: 0;
					color: $color_red;
					.img-block {
						border: 1px solid $color_red;
						@include box-shadow(0 0 8px rgba(215,10,10,.5));
					}
				}
			}
		}
	}
}

.bannrMenuIsOpen {
	overflow: hidden;
	.alvAdv-backdrop {
		visibility: visible;
		opacity: 1;
	}
	.alvAdv-menu {
		visibility: visible;
		opacity: 1;
		left: 0;
	}
}