//	=========================================================================================
// File Name: main-menu-mixin.scss
// Description: Common mixin for menus, contain dark and light version scss.
// ----------------------------------------------------------------------------------------
// Item Name: Robust - Responsive Admin Theme
// Version: 1.2
// Author: PIXINVENT
// Author URL: http://www.themeforest.net/user/pixinvent
//==========================================================================================

// Header navbar content and brand expanded & collapsed stats
// spacing and sizing.
// ================================================

// Mixins for the menu and navbar position, margin and width change
@mixin main-menu-width($menu-width){
    margin-left: $menu-width;
}
@mixin menu-navbar-width($menu-width){
    float: left;
    width: $menu-width;
}
// Mixins for the menu show hide based on width
@mixin vertical-menu-transform-show($transform-width){
	transform: translate3d($transform-width,0,0);
	backface-visibility: hidden;
	perspective: 1000;
}
@mixin vertical-menu-transform-hide(){
    transform: translate3d(0,0,0);
}
// Mixins for the menu flipped menu 
@mixin vertical-flipped-menu($menu-width){
    margin: 0;
    margin-right: $menu-width;
}
// Mixins for the sub menu arrow
@mixin vertical-menu-has-sub-arrow($arrow-font-size){
	&.has-sub{
		> a:not(.mm-next):after{
			content: "\ea0b";
		    font-family: "icomoon";
		    font-size: $arrow-font-size;
		    display: inline-block;
		    position: absolute;
		    right: 20px;
		    top: 10px;
		    transform: rotate(0deg);
		    transition: -webkit-transform 0.2s ease-in-out;
		}
	}
	&.open{
		> a:not(.mm-next):after{
			transform: rotate(90deg);
		}
	}
}




// Light & Dark menu mixin
// $theme-color : Menu text color
// $theme-bg 	: Menu background color
// ================================================
@mixin menu-theme($theme-color, $theme-bg){

	$main-menu-top-hover-bg:            darken($theme-bg, 4%);  //$brand-primary
	$main-menu-top-hover-color:         darken($theme-color, 10%);

	$main-menu-top-open-color:          darken($theme-color, 10%);
	$main-menu-top-open-bg:             darken($theme-bg, 4%);
	$main-menu-top-open-hover-bg:       darken($theme-bg, 6%);
	$main-menu-top-open-head-bg:        darken($theme-bg, 4%);

	$main-menu-active-color:        	darken($theme-color, 10%);
	$main-menu-active-bg:         	    darken($theme-bg, 10%);

	$main-menu-top-active-bg:           darken($theme-bg, 4%);  //$brand-primary
	$main-menu-top-active-color:        $white;
	$main-menu-top-active-head-bg:      darken($theme-bg, 4%);  //$brand-primary

	$main-menu-sub-bg:                  darken($theme-bg, 4%);
	$main-menu-sub-color:               $theme-color;
	$main-menu-sub-hover-bg:            darken($theme-bg, 4%);
	$main-menu-sub-hover-color:         lighten($theme-color, 4%);
	$main-menu-sub-active-bg:           rgba(0, 0, 0, .06);

	$main-menu-sub-open-bg:             darken($theme-bg, 8%);
	$main-menu-sub-open-color:          $theme-color;
	$main-menu-sub-open-hover-bg:       darken($theme-bg, 10%);

	color:$theme-color;
	background:$theme-bg;

	.main-menu-header{
		padding: 20px;
		.menu-search{
			background: darken($theme-bg, 10%);
			padding: 0.5rem 1rem;
			color: $main-menu-top-hover-color;
		    &:focus{
		    	border-color: darken($theme-bg, 15%);
		    }
		}
	}
	.navigation{
		background: $theme-bg;
		.navigation-header{
			color: $theme-color;
			padding: 24px 20px 8px 20px;
		}
		li{
			a{
				color: $theme-color;
				span.menu-sub-title{
					color: lighten($theme-color, 30%);
				}
			}
			&.hover,&.open{
				> a{
					color: $white;
				}
			}
		}

		> li {
			padding: 0;
			> a {
				padding: $menu-padding;
	    		.label{
	    			margin-top: 4px;
	    			margin-right: 5px;
	    		}
	    		i{
				    position: relative;
				    top: 3px;
	    		}
			}
			&.open {
				> ul{
					background: $main-menu-top-open-bg;
				}
				> a {
					color: $main-menu-top-open-color;
					background: $main-menu-top-open-head-bg;
				}

				.hover {
					> a {
						background: $main-menu-top-open-hover-bg;
					}
				}
			}

			&:not(.open){
				> ul{
					display:none;
				}
			}

			&.hover, &:hover, &.active {
				> a{
					color: $main-menu-top-hover-color;
					background-color: $main-menu-top-hover-bg;
					&.mm-next{
						background-color: inherit;
					}
				}
			}
			&.active {
				> a {
					background-color: $main-menu-top-active-head-bg;
				}
			}

		    .active {
				background: $main-menu-top-open-hover-bg;
		
				> a {
					color: $main-menu-top-active-color;
					background: $main-menu-top-open-hover-bg;
				}
		
				.hover {
					> a {
						background: $main-menu-top-active-head-bg;
					}
				}
		    }

			ul {
				padding:0;
				margin: 0;
				font-size: 1rem;

				li {
					color: $main-menu-sub-color;
					background: transparent;
			        > a{
						padding: $menu-second-level-padding;
			        }
				}
				.has-sub {
					&:not(.open){
						> ul{
							display:none;
						}
					}
				}
				.open {

					background: $main-menu-sub-open-bg;

					> a {
						color: $main-menu-sub-open-color;
					}
					//for 2rd level menu
					> ul{
						display: block;
						background: $main-menu-sub-open-bg;
						li >a{
							padding: $menu-third-level-padding;
						}
						//for 3rd level menu
						.open {
							background: darken($main-menu-sub-open-bg,5%);

							> ul{
								display: block;
								background: darken($main-menu-sub-open-bg,5%);
								li >a{
									padding: $menu-forth-level-padding;
								}
							}
						}
					}

					.hover {
						> a {
							background: $main-menu-sub-open-hover-bg;
						}
					}
				}

				.hover, &:hover {
					> a {
						color: $main-menu-sub-hover-color;
						background-color: $main-menu-sub-hover-bg;
					}
				}

				.active {
					background: $main-menu-sub-active-bg;

					> a {
						color: $main-menu-active-color;
						background-color: $main-menu-active-bg;
					}

					.hover {
						> a {
							background-color: transparent;
						}
					}
				}
			}

			>ul{
				background: $theme-bg;
			}
		}
	}

	//For popout menu
	ul.menu-popout{
		background: $theme-bg;
		li{
			a{
				color: $theme-color;
				span.menu-sub-title{
					color: lighten($theme-color, 30%);
				}
			}
			&.hover,&:hover,&.open{
				> a{
					background:$main-menu-top-open-hover-bg;
				}
			}
		}

		.has-sub {
			&:not(.open){
				> ul{
					display:none;
				}
			}
		}
		.open {
			background: $main-menu-sub-open-bg;
			> a {
				color: $main-menu-sub-open-color;
			}
			//for 2rd level menu
			> ul{
				display: block;
				background: $main-menu-sub-open-bg;
				//for 3rd level menu
				.open {
					background: darken($main-menu-sub-open-bg,5%);
					> ul{
						display: block;
						background: darken($main-menu-sub-open-bg,5%);
					}
				}
			}
			li.hover,li:hover {
				> a {
					background: $main-menu-sub-open-hover-bg;
				}
			}
		}

		.hover, &:hover {
			> a {
				color: $main-menu-sub-hover-color;
				background-color: $main-menu-sub-hover-bg;
			}
		}

		.active {
			background: $main-menu-sub-active-bg;

			> a {
				color: $main-menu-active-color;
				background-color: $main-menu-active-bg;
			}

			.hover,:hover {
				> a {
					background-color: transparent;
				}
			}
		}
	}
	//For pop

	// mmenu specific common scss
	&.mm-menu {
		.mm-search {
			input{
				background: darken($theme-bg, 10%);
				color: $theme-color;
				padding: 16px 16px;
			}
		}
		.mm-divider {
		    background: darken($theme-bg, 5%);
		}
		.mm-navbar {

			> {
				border-color: lighten($theme-bg, 5%);

				*,
				a{
					color: darken($theme-color, 25%);
				}
				.mm-btn:before,
				.mm-btn:after{
					border-color: darken($theme-color, 5%);
				}
			}
		}

		.mm-listview {
			> li {
				.mm-arrow:after,
				.mm-next:after, {
		    		border-color: darken($theme-color, 15%);
				}
			}
			&.navigation-main{
				> li {
					&:hover{
		    			.mm-arrow:after,
						.mm-next:after, {
				    		border-color: $white;
						}
	    			}
				}
			}
		}
		.mm-hasnavbar{
			.mm-listview {
				> li {
					&:hover{
						background-color:darken($theme-bg, 5%);
					}
				}
			}
		}
	}
}
// Menucontent display mixin
// $menu-expanded-width : Expanded menu width
// $menu-collapsed-width: Collapsed menu width
// ================================================
@mixin menu-content($menu-expanded-width, $menu-collapsed-width, $theme-color, $theme-bg){
	.main-menu-content{
		> span.menu-title, a.menu-title{
		    right: -($menu-expanded-width);
		    width: $menu-expanded-width;
		    font-weight:600;
		    color: #fff;
		    text-transform:uppercase;
		    text-align: left;
		    background-color: $brand-primary;
		    border-color: $brand-primary;
		    padding: 11px 20px;
		}
		> ul.menu-content{
			left: $menu-collapsed-width;
		    width: $menu-expanded-width;
		    transition: visibility .25s,opacity .25s;
		    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.1);
		    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
			border-left: 1px solid rgba(0, 0, 0, 0.02);

			li {
				white-space: nowrap;
				position: relative;

				a {
		    		display: block;
					padding: 8px 20px 8px 20px;
		        }

	        	@include vertical-menu-has-sub-arrow(1rem);
			}
		}
	}
}