/* Header Nav Vertical */
@media (min-width: 992px) {

	html.side-header,
	html.side-header-hamburguer-sidebar {

		#header.side-header {

			.side-header-scrollable {
				height: 100%;
				margin-#{$right}: -13px;
				.scrollable-content {
					padding-#{$right}: 10px;
					padding-#{$left}: 0;
				}
			}

			.header-nav-main {
				nav {
					> ul {
						> li {
							> a {
								&.dropdown-toggle {
									.fa-chevron-down {
										display: block;
									    position: absolute;
									    right: 7px;
									    width: 30px;
									    height: 30px;
									    display: flex;
									    align-items: center;
									    justify-content: center;
									    transform: rotate(-90deg);
									    font-size: 0.5rem;
										&:before {
											content: none;
										}
									}
								}
							}
						}
					}
				}
			}

			.header-nav {

				nav {
					display: block !important;
				}

				// Header Nav Links Vertical Dropdown
				&.header-nav-links-vertical-dropdown {
					nav {
						> ul {
							> li {
								&.dropdown {
									position: relative;
								}
							}
						}
					}
				}

				// Header Nav Links Vertical Expand
				&.header-nav-links-vertical-expand {
					nav {
						> ul {
							> li.dropdown {
								&:before {
									top: 23px;
									#{$right}: 20px;
								}
								> .dropdown-menu {
									li {
										a {
											border: 0;
										}
									}
								}
								&:not(.open) {
									.dropdown-menu {
										overflow: hidden;
										opacity: 0;
										width: 0;
										height: 0;
										top: -10000px;
									}
								}
								&.open, &.accessibility-open {
									> .dropdown-menu,
									> .dropdown-menu li.dropdown-submenu.open > .dropdown-menu {
										position: relative;
										box-shadow: none;
										margin: 0;
										padding: 5px 0 5px 15px;
										left: auto;
										right: auto;
										transform: none;
										min-width: auto;
										width: 100%;
										opacity: 1 !important;
									}
									> .dropdown-menu {
										li.dropdown-submenu.open {
											> a:after {
												#{$right}: 20px;
											}
										}
									}
								}
								&.dropdown-mega {
									.dropdown-menu {
										min-width: 0;
									}
									.dropdown-mega-content {
										padding: 5px 0 5px 15px;
										[class*=col] {
											max-width: 100%;
											width: 100%;
											display: block;
											padding: 5px 0;
											flex: none;
										}
										.dropdown-mega-sub-title {
											padding-left: 15px;
											font-size: 0.75em;
										}
										.dropdown-mega-sub-nav {
											padding-left: 30px;
										}
									}
								}
							}

						}
					}
					.thumb-info-preview {
						display: none;
					}
				}

				// Header Nav Links Vertical Columns
				&.header-nav-links-vertical-columns {
					position: relative;
				
					nav {
						margin-top: -10px;
						> ul {
							> li.dropdown {
								position: static;
								.dropdown-menu {
									box-shadow: none;
									top: 50% !important;
									transform: translateY(-50%);
									left: 10000px;
									margin-left: -15px;
									margin-top: 10px;
									opacity: 0;
									transition: margin-left .2s ease-out, opacity .2s ease-out;

									&:before {
										content: '';
										display: block;
										position: absolute;
										top: -100vh;
										width: 100%;
										height: 100%;
										background: #FCFCFC;
										border-right: 1px solid var(--grey-100);
										border-left: 1px solid var(--grey-100);
										height: 200vh;
									}

									li.dropdown-submenu {
										position: static;
										> .dropdown-menu {
											margin-left: 0;
											left: 100%;
											right: auto;
											margin-left: -15px;
											opacity: 0;
											transition: margin-left .2s ease-out, opacity .2s ease-out;
											transform: translate3d(10000px, 0, 0);
											&:before {
												border-left: 0;
											}
										}
										&:hover {
											> .dropdown-menu {
												right: auto;
												opacity: 1;
												margin-left: 0;
												transform: translateY(-50%);
											}
										}
										&.dropdown-reverse {
											> .dropdown-menu {
												left: auto;
											}
											&:hover {
												> .dropdown-menu {
													right: 100%;
												}
											}
										}
									}
								}

								&:hover {
									> .dropdown-menu {
										margin-left: 0;
										margin-top: 0;
										padding-top: 0;
										opacity: 1;
									}
								}
							}
							> li.dropdown-mega {
								position: static !important;
							}
						}
					}
					.thumb-info-preview {
						display: none;
					}
				}

				// Header Nav Links Vertical Slide
				&.header-nav-links-vertical-slide {
					height: 100%;
					justify-content: center;
					.header-nav-main {
						height: 100% !important;
					}
					nav {
						> ul {
							height: 100%;
							justify-content: center;
							> li {
								height: auto;
							}
						}
						ul {
							
							transform: translate3d(0, 0, 0);
							transition: ease all 300ms;

							&.next-menu {
								transform: translate3d(-100%, 0, 0);
								@include if-rtl() {
									transform: translate3d(100%, 0, 0);
								}
							}

							> li.dropdown > a.dropdown-toggle,
							> li.dropdown .dropdown-menu li.dropdown-submenu > a.dropdown-item {
								display: inline-block;
								&:before {
									display: none !important;
								}
								&:after {
									font-family: 'Font Awesome 6 Free';
									content: "\f054";
									font-weight: 900;
									position: relative;
									font-size: 0.5rem;
									opacity: 0.7;
									display: inline-block;
									border: 0;
									top: 1px;
									left: 5px;
									transform: none;
								}
								&:hover {
									&:after {
										animation: sideMenuArrow 600ms ease;
										animation-iteration-count: infinite;
									}
								}
							}

							> li.dropdown .dropdown-menu li.dropdown-submenu > a.dropdown-item {
								background: transparent;
								&:after {
									top: -1px;
									margin-left: 5px;
									transform: none;
								}
							}

							> li.dropdown .dropdown-menu li a {
								background: transparent;
							}

							li {
								position: static;
								text-align: center;

								a {
									display: inline-block;
									width: 100%;
								}

								ul {
									visibility: hidden;

									&.visible {
										visibility: visible;
									}
								}

								&.back-button {
									> a {
										cursor: pointer;
										background: transparent;

										&:before {
											font-family: 'Font Awesome 6 Free';
											content: "\f053";
											font-weight: 900;
											position: relative;
											font-size: 0.5rem;
											opacity: 0.7;
											display: inline-block;
											border: 0;
											top: -1px;
											right: 5px;
										}
										&:hover {
											&:before {
												animation: sideMenuArrowBack 600ms ease;
												animation-iteration-count: infinite;
											}
										}

									}
								}

								&.dropdown {
									.dropdown-menu {
										display: flex;
										flex-direction: column;
										justify-content: center;
										width: 100%;
										height: 100%;
										top: 50% !important;
										#{$left}: 100%;
										padding: 0;
										margin: 0 !important;
										opacity: 1;
										border-top: none;
										box-shadow: none;
										transform: translate3d(0, -50%, 0) !important;

										&::-webkit-scrollbar {
										    width: 5px;
										}
										&::-webkit-scrollbar-thumb {
										    -webkit-border-radius: 0px;
										    border-radius: 0px;
										    background: rgba(var(--grey-500), 0.5); 
										}

										&.next-menu {
											transform: translate3d(-100%, -50%, 0) !important;
											@include if-rtl() {
												transform: translate3d(100%, -50%, 0) !important;
											}
										}

										li.dropdown-submenu {
											position: static;
										}
									}
								}

								&.dropdown-submenu {
									position: static;
								}
							}
						}
					}
				}

			}
		}
	}

}