/*=========================================================================================
	File Name: horizontal-menu.scss
	Description: A classic horizontal menu for easy navingation & support all devices.
	It support light & dark version, filpped layout, right side icons, borders menu for
	item seperation.
	----------------------------------------------------------------------------------------
	Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
	Version: 1.0
	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 "../../variables/components-variables";

// Overrides user variable
@import "../../../../../assets/scss/variables/variables";
@import "../../../../../assets/scss/variables/components-variables";

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

/* html body.horizontal-menu{
	padding-top:0;
} */
// Horizontal Menu
//=========================
.horizontal-menu{
	.navbar-horizontal .nav-item{
		i{
			font-size: 1.4rem;
		}
		a span{
			font-size: 1.1rem;
		}
	}
	.navbar-horizontal ul#main-menu-navigation > li > a{
		padding: 1.8rem 1rem;
	}
	#main-menu-navigation{
		ul {
			li {
				a{
					span{
						transition: all 0.2s ease;
						display: inline-block;
						&:hover,.hover{
							 transform: translateX(4px);
						}
					}
				}
			}
		}
	}
	
	&.menu-collapsed{
		#main-menu-navigation{
			.nav-item{
				a span{
					display: none;
				}
			}			
		}
	}
	.navigation-header{
		font-family: inherit;
    	color: #929292;
    	padding: 8px 20px;
    	font-size: 1rem;
	}
	.navbar-flipped{
		.navbar-nav{
			.nav-item{
				float:right;
			}
		}
	}
	.navbar-light{
		ul#main-menu-navigation > li.active > a{
			border-bottom: 1px solid $info;
			background: $white;
		}
		.active > a{
			background: whitesmoke;
			font-weight: 500;
		}		
	}
	.navbar-dark{
		.nav-item{
			&.active > a{
				// border-bottom: 2px solid $primary;
				background-color: rgba(255,255,255, 0.05);
			}
			&:hover,.hover{
				background-color: rgba(255,255,255, 0.05);
			}
		}
		.active > a{
			background: whitesmoke;
			font-weight: 500;
		}
	}
}

// Import vertical-overlay-menu.scss for small screen support
@import "vertical-overlay-menu.scss";