/*------------------------------------------------------------------
[Icon Menu]
Project:	Jampack
-------------------------------------------------------------------*/
/**Vertical Icon Navigation**/
.hk-wrapper[data-layout="twocolumn"] {
	.hk-pg-wrapper {
		margin-left: 72px;
		@include transition(all 0.2s ease);
	}
	.hk-navbar {
		left:72px;
	}
	.hk-menu {
		.main-menu {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			flex-flow: column;
			position: fixed;
			left: 0;
			top: 0;
			bottom: 0;
			width: 72px;
			margin-left: 0;
			z-index:1032;
			background: var(--hk-menu-bg); // <-- THEMED
			border-right: 1px solid var(--hk-menu-border); // <-- THEMED
			@include transition(all 0.2s ease);
			
			>.nicescroll-bar {
				overflow: auto;
				flex: 1 1 auto;
			}
			.menu-content-wrap {
				padding:1.5rem;
				position: relative;
				.navbar-nav {
					.nav-item {
						.nav-link {
							position:relative;
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
							-webkit-box-align: center;
							-ms-flex-align: center;
							align-items: center;
							padding:.5rem 1rem;
							margin:0 -1rem;
							white-space: nowrap;
							color: var(--hk-menu-text); // <-- THEMED
							.nav-icon-wrap {
								display: -webkit-box;
								display: -ms-flexbox;
								display:flex;
								margin-right: .875rem;
								>*:not(.badge) {
									font-size:1.5rem;
								}
							}
						}
						&.active {
							>.nav-link {
								color: var(--bs-primary)!important; // <-- THEMED
							}
						}
					}	
					> .nav-item {
						&.active {
							>.nav-link {
								background-color: var(--bs-soft-primary); // <-- THEMED
								color: var(--bs-primary)!important; // <-- THEMED
								border-radius: 0.5rem;
							}
						}
					}
				}
			}
			.menu-header {
				padding: 0.5rem 1.5rem;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				height: 65px;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				.navbar-brand {
					margin: 0;
				}
			}
			/*Sidebar fixednav*/
			.bottom-nav {
				flex: 0 0 auto;
				padding-bottom: .5rem;	
			}
		}
		.sub-menu {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			flex-flow: column;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 72px;
			width: 270px;
			margin-left: 0;
			z-index:1031;
			overflow: hidden;
			background: var(--hk-submenu-bg); // <-- THEMED
			border-right: 1px solid var(--hk-menu-border); // <-- THEMED
			@include transform(translate(-100%));
			@include transition(all 0.2s ease);
			>.nicescroll-bar {
				overflow: auto;
				flex: 1 1 auto;
			}
			.menu-content-wrap {
				padding:1.5rem;
				position: relative;
				.menu-group {
					.nav-header {
						padding: 0 0 .5rem 0;
						font-size: 0.875rem;
						color: var(--bs-primary); // <-- THEMED
						font-weight: 500;
					}
					.navbar-nav {
						.nav-item {
							.nav-link {
								position:relative;
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								-webkit-box-align: center;
								-ms-flex-align: center;
								align-items: center;
								padding:.5rem 1rem;
								margin:0 -1rem;
								white-space: nowrap;
								color: var(--hk-menu-text); // <-- THEMED
								>*{
									@include transition(transform .25s ease);
								}
								.nav-icon-wrap {
									display: -webkit-box;
									display: -ms-flexbox;
									display:flex;
									margin-right: .875rem;
									>*:not(.badge) {
										font-size:1.5rem;
									}
								}
								&[data-bs-toggle="collapse"] {
									&::after {
										position: absolute;
										right: 1rem;
										z-index: -1;
										content: '\f2f9';
										font: normal normal normal 1.125rem/1 'Material-Design-Iconic-Font';
										text-rendering: auto;
										margin-left: auto;
										@include transform(rotate(0deg));
										@include transition(all 0.2s ease);
										color: var(--hk-menu-arrow-color); // <-- THEMED
									}
									&[aria-default="true"] {
										&::after {
											@include transform(rotate(-180deg));
										}
									}
								}
								&:hover {
									>* {
										@include transform(translateX(5px));
									}
								}
							}
							&.active {
								>.nav-link {
									color: var(--bs-primary)!important; // <-- THEMED
								}
							}
						}	
						> .nav-item {
							&.active {
								>.nav-link {
									color: var(--bs-primary)!important; // <-- THEMED
								}
							}
							> ul {
								position:relative;
								padding: 0.5rem 0;
								&:after {
									content: "";
									width: 1px;
									height: calc(100% - 20px);
									position: absolute;
									left: 10px;
									top: 0;
									bottom: 0;
									margin:auto;
									background: var(--hk-menu-separator); // <-- THEMED
								}
							}
						}
					}
					.nav-children {
						.nav-item {
							.nav-link {
								font-size: 0.875rem;
								padding: 0.15rem 0 0.15rem 1.4rem;
								margin: 0 0 0 1rem;
								@include transition(all .25s ease);
								&[data-bs-toggle="collapse"] {
									&::after {
										right: 0;
									}
								}	
							}
						}    	
						.nav-children {
							.nav-item {
								.nav-link {
									padding: 0.15rem 0 0.15rem 2rem;
								}
							} 
						}
					}
				}
				.menu-gap {
					height: 25px;
				}
			}
			.menu-header {
				padding: 0 1.5rem;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				flex: 0 0 auto;
				min-height: 65px;
				width: 269px;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
					.navbar-toggle {
						flex-shrink: 0;	
					}
			}
			.subnav-list {
				display: none;
			}
		}
	}
	&[data-submenu="active"] {
		.hk-menu {
			.sub-menu {
				@include transform(translate(0));
			}
		}
	}

	/* REMOVED [data-menu="light"] and [data-menu="dark"] sections.
	   Base styles above now use CSS variables.
	*/
}	
@media (max-width: 1199px) {
	.hk-wrapper[data-layout="twocolumn"] {
		.hk-pg-wrapper {
			margin-left: 0;
		}
		.hk-navbar {
			left:0;
		}
		.hk-menu {
			.main-menu {
				left: -72px;
			}
			.sub-menu {
				left: 0;
			}
		}
		&[data-layout-style="offcanvas"] {
			.hk-menu {
				.main-menu {
					left: 0;
				}
				.sub-menu {
					left: 72px;
				}
			}
			.hk-menu-backdrop {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: 1030;
				background-color: var(--hk-scrim-bg); // <-- THEMED
				opacity: .5;
				height: auto;
				width: auto;
			}
		}
	}
}