/*=========================================================================================
	File Name: vertical-overlay-menu.scss
	Description: A overlay style vertical menu with show and hide support. It support
	light & dark version, filpped layout, right side icons, native scroll and borders menu
	item seperation.
	----------------------------------------------------------------------------------------
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

// Core variables and mixins
@import "../../../bootstrap/functions";
@import "../../../bootstrap/mixins";
@import "../../../bootstrap-extended/mixins";

// Core variables and mixins overrides
@import "../../variables/variables";
@import "../../../bootstrap/variables";

@import "../../variables/components-variables";

// Import first main menu mixin
@import "../../mixins/main-menu-mixin";

// Vertical Overlay Menu
//=========================
.vertical-overlay-menu {

	//Content expanded
	.content {
		@include main-menu-width(0);
	}

	//Navbar expanded
	.navbar {
		.navbar-header {
			@include menu-navbar-width($overlay-menu-width);
		}

		&.navbar-brand-center {
			.navbar-container {
				@include main-menu-width(auto);
			}

			.navbar-header {
				@include menu-navbar-width(auto);
			}
		}
	}

	// Main menu expanded
	.main-menu {
		opacity: 0;
		transform: translate3d(0, 0, 0);
		transition: width .25s, opacity .25s, transform .25s;
		width: $overlay-menu-width;
		left: -($overlay-menu-width);

		.navigation {
			.navigation-header {
				padding-left: 34px;
				.la-ellipsis-h,
				.nav-menu-icon {
					display: none;
				}
			}

			>li {
				>a {
					padding-left: 32px;
					>i {
						font-size: 1.6rem;
						margin-right: 12px;
						float: left;

						&:before {
							transition: 200ms ease all;
						}
					}
				}
				&.hover{
					>a {
						padding-left: 36px;
					}
				}
				ul li{
					> a{
						padding-left: 68px;
					}
				}
				.active{
					> a{
						padding-left: 54px;
					}
				}
				
				ul .open > ul li{
					> a{
						padding-left: 74px;
					}
					&:not(.active):hover > a{
						padding-left: 78px;
					}
				}
				&.open > ul > li{
					// > a{
					// }
					&:hover {
						> a{
							padding-left: 72px;
						}
						&.active > a{
							padding-left: 54px;
						}
					}
				}
			}

			li {
				@include vertical-menu-has-sub-arrow(1rem);
				&.has-sub {
					> a:not(.mm-next):after {
						right: 34px;
					}
				}
			}
		}
	}

	&.menu-open {
		.main-menu {
			opacity: 1;
			transform: translate3d($overlay-menu-width, 0, 0);
			transition: width .25s, opacity .25s, transform .25s;
		}
	}

	&.menu-hide {
		.main-menu {
			@extend .main-menu;
		}
	}

	// Flipped menu open
	&.menu-flipped {

		// Main menu hidden on flipped
		.main-menu {
			right: -($overlay-menu-width);
			left: inherit;
		}

		//Navbar flipped
		.navbar {
			.navbar-container {
				@include vertical-flipped-menu($overlay-menu-width);
			}

			.navbar-header {
				float: right;
			}
		}

		&.menu-open {
			.main-menu {
				transform: translate3d(-$overlay-menu-width, 0, 0);
			}
		}
	}

	// For Fixed-footer
	footer{
		&.footer {
			&.fixed-bottom{
				z-index: 999;
			}
		}
	}

	// Boxed Layout
	&.boxed-layout{
		position: relative;

		.main-menu{
			&.menu-fixed{
				position: absolute;
			}
		}
	}
}

// @include media-breakpoint-down(md) {
// 	.vertical-overlay-menu {

// 		//Box-layout
// 		&[data-menu="vertical-compact-menu"]{
// 			&.boxed-layout{
// 				&.menu-open {
// 					.main-menu {
// 						// transform: translate3d($compact-menu-width, 0, 0);
// 					}
// 				}
// 			}
// 		}
// 	}
// }

@media (max-width: 768px){
	.vertical-overlay-menu{
		.header-navbar{
			.navbar-header{
				.mobile-menu{
					a.menu-toggle{
						padding-top: 1rem;
					}
				}
				li.nav-item.d-md-none{
					a.open-navbar-container{
						padding-top: 1rem;
					}
				}
			}
		}
	}
}
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
