@import "../../themes/themes.style.scss";


.mb-backdrop {
	position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000;
	transition: opacity 750ms ease;
	will-change: transform;
	opacity: 0;
	pointer-events: none;
	z-index: 9999;
	&.active {
		pointer-events: all;
		opacity: .6;
	}
}

.mb[side-menu] {
	font-family: 'MontSerrat', sans-serif;
	height: calc(100% - #{$topbarHeight});
	width: 220px;
	position: relative;
	z-index: 0;
	will-change: transform;
	vertical-align: top;
	transition: transform 750ms cubic-bezier(0.96, 0.015, 0.45, 1);
	display: inline-block;
	user-select: none;
	padding-left: 10px;
	padding-right: 10px;

	@media screen and (max-width: 768px) {
		position: fixed;
		background-color: #ffffff;
		left: 0px;
		top: 0px;
		bottom: 0px;
		right: auto;
		transform: translate3d(-100%, 0, 0);
		height: 100%;
		z-index: 99999;

		&.active {
			background-color: #fff;
			transform: translate3d(0%, 0, 0);
		}
	}

	> .mb-sm-quick-container {
		padding: 15px 0px 15px 0px;
	}

	> .mb-sm-content-container {
		width: 100%;
		background-color: #fff;
		@include themify(background-color, backgroundSideMenu);
	}

	.mb-sm-content {
		height: calc(100vh - calc(200px -  #{$topbarHeight}));
		padding-left: 10px;
		padding-bottom: 10px;
		overflow: hidden;
		position: relative;

		@media screen and (max-width: 1368px) {
			height: calc(134vh - 200px);
		}

		&.without-env-bar{
			height: calc(100vh - calc(150px -  #{$topbarHeight}));

			@media screen and (max-width: 1368px) {
				height: calc(134vh - 152px);
			}	
		}
		
		&:hover {
			overflow-y: scroll;
		}
	}
}