/*------------------------------------------------------------------
[Classic Menu]
Project:	Jampack
--------------------------------------------------------------------*/
/**Vertical Navigation**/
.hk-wrapper[data-layout="vertical"] {
	.hk-pg-wrapper {
		@include transition(all 0.2s ease);
	}

	.hk-menu {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-flow: column;
		position: fixed;
		top: 0;
		bottom: 0;
		width: 270px;
		margin-left: 0;
		z-index: 1032;
		border-right: 1px solid var(--hk-menu-border); // <-- THEMED
		background: var(--hk-menu-bg); // <-- THEMED
		@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 0.5rem 0;
					font-size: 0.875rem;
					color: var(--hk-menu-header-text); // <-- 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: 0.5rem 1rem;
							margin: 0 -1rem;
							white-space: nowrap;
							color: var(--hk-menu-text); // <-- THEMED

							>* {
								@include transition(transform 0.25s ease);
							}

							.nav-icon-wrap {
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								margin-right: 0.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;
									color: var(--hk-menu-arrow-color); // <-- THEMED
									@include transform(rotate(0deg));
									@include transition(all 0.2s ease);
								}

								&[aria-expanded="true"] {
									&::after {
										@include transform(rotate(-180deg));
									}
								}
							}

							&:hover {
								>* {
									@include transform(translateX(5px));
								}
							}

							&.active {
								color: var(--hk-menu-item-active-text) !important; // <-- THEMED
							}
						}
					}

					>.nav-item {
						&.active {
							>.nav-link {
								background: var(--hk-menu-item-active-bg); // <-- THEMED
								color: var(--hk-menu-item-active-text) !important; // <-- THEMED
								border-radius: 0.5rem;
							}
						}

						>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-border-secondary); // <-- 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 0.25s ease);

							&[data-bs-toggle="collapse"] {
								&::after {
									right: 0;
								}
							}

							&.active {
								color: var(--hk-menu-item-active-text) !important; // <-- THEMED
								background: transparent;
							}
						}
					}

					.nav-children {
						.nav-item {
							.nav-link {
								padding: 0.15rem 0 0.15rem 2rem;
							}
						}
					}
				}
			}

			.menu-gap {
				height: 25px;
			}
		}

		.menu-header {
			padding: 0.5rem 1.1875rem;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			flex: 0 0 auto;
			height: 65px;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			overflow: hidden;

			.navbar-toggle {
				flex-shrink: 0;
			}

			>span {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				flex-shrink: 0;
				align-items: center;
				flex-grow: 1;
				justify-content: space-between;

				.navbar-brand {
					.brand-img {
						&:last-child {
							margin-left: 0.5rem;
						}
					}
				}
			}
		}

		/*Sidebar fixednav*/
		.bottom-nav {
			flex: 0 0 auto;
			padding-bottom: 0.5rem;
		}

		/*Horizontal Scrollbar*/
		.simplebar-track.simplebar-horizontal {
			display: none;
		}
	}

	&[data-layout-style="default"] {
		.hk-pg-wrapper {
			margin-left: 0;
		}

		.hk-navbar {
			left: 0;
		}

		.hk-menu {
			left: -270px;
		}
	}

	&[data-layout-style="collapsed"] {
		.hk-menu {
			left: 0;
		}

		.hk-menu-backdrop {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 1031;
			@include transition(all 0.25s ease);
			background-color: var(--bs-dark); // <-- THEMED
			opacity: 0.5;
			height: auto;
			width: auto;
			visibility: visible;
		}
	}

	/* REMOVED [data-menu="light"] and [data-menu="dark"] blocks.
	The base .hk-menu styles are now theme-aware.
	*/
}

@media (min-width: 1200px) {
	.hk-wrapper[data-layout="vertical"] {
		&[data-layout-style="default"] {
			.hk-pg-wrapper {
				margin-left: 270px;
			}

			.hk-navbar {
				left: 270px;
			}

			.hk-menu {
				left: 0;
			}
		}

		&[data-layout-style="collapsed"] {
			.hk-pg-wrapper {
				margin-left: 72px;
			}

			.hk-navbar {
				left: 72px;
			}

			.hk-menu {
				width: 72px;

				// added for hide toggle button in react version
				.menu-header {
					.navbar-toggle {
						filter: blur(100px);
					}
				}

				.menu-content-wrap {
					>.callout {
						display: none;
					}

					.menu-group {
						.nav-header {
							display: none;
						}

						.navbar-nav>.nav-item>.nav-link {
							>*:not(.nav-icon-wrap) {
								visibility: hidden;
								flex-shrink: 0;
							}

							&[data-bs-toggle="collapse"]::after {
								right: -1.5rem;
							}
						}

						.collapse.show {
							display: none;
						}
					}

					.menu-gap {
						display: none;
					}
				}

				.menu-header {
					>span {
						.navbar-brand {
							.brand-img {
								&:last-child {
									display: none;
								}
							}
						}
					}
				}

				.navbar-toggle {
					@include transform(rotate(180deg));
				}
			}

			&[data-hover="active"] {
				.hk-menu:hover {
					width: 270px;

					// added for remove blur from toggle button in react version
					.menu-header {
						.navbar-toggle {
							filter: none
						}
					}

					.menu-content-wrap {
						>.callout {
							display: -webkit-box;
							display: -ms-flexbox;
							display: flex;
						}

						.menu-group {
							.nav-header {
								display: block;
							}

							.navbar-nav>.nav-item>.nav-link {
								>*:not(.nav-icon-wrap) {
									visibility: visible;
								}

								&[data-bs-toggle="collapse"]::after {
									right: 1rem;
								}
							}

							.collapse.show {
								display: -ms-flexbox;
								display: flex;
							}
						}

						.menu-gap {
							display: block;
						}
					}

					.menu-header {
						>span {
							.navbar-brand {
								.brand-img {
									&:last-child {
										display: inline;
									}
								}
							}
						}
					}
				}
			}

			.hk-menu-backdrop {
				opacity: 0;
				height: 0;
				width: 0;
				visibility: hidden;
			}
		}
	}
}