/*--------------------------------------------------------------
# Menu
--------------------------------------------------------------*/

.pxl-nav-menu {
	.pxl-menu-primary > li {
		&.menu-item-has-children > a {
			.pxl-nav-icon {
				position: absolute;
				display: inline-flex;
				top: 50%;
				right: -15px;
				line-height: 1;
				@include transform(translate(0, -50%));
				@include transition(inherit);
				&:before {
					font-size: 10px;
				}
			}
			&:hover {
				.pxl-nav-icon {
					@extend .pxl-color-thi-fif;
				}
			}
		}
		&.current_page_item > a,
		&.current-menu-item > a,
		&.current_page_ancestor > a,
		&.current-menu-ancestor > a {
			.pxl-nav-icon {
				@extend .pxl-color-thi-fif;
			}
		}
	}
	.sub-menu li.menu-item-has-children > a:after {
		content: "\f285";
		font-family: "bootstrap-icons";
		position: absolute;
		top: 50%;
		right: 15px;
		font-size: 10px;
		font-weight: 500;
		@extend .pxl-color-pri-fou;
		@include transform(translate(0, -50%));
		@include transition(none);
	}
}
.pxl-nav-hidden {
	.pxl-menu-hidden-toggle {
		position: absolute;
		right: 20px;
		display: block;
		z-index: 9;
		width: 100%;
		text-align: right;
		cursor: pointer;
		font-size: 24px;
		margin-left: 15px;
		color: $primary_color;	
		opacity: 0;
		transform-origin: center top;
		transition: 1s cubic-bezier(.68,-.55,.265,1.55);
		transition-delay: calc(.1s* var(--dsn-li-index));
		transition-property: opacity, visibility, transform;
		visibility: hidden;
		&:before {
			content: "\f285";
			font-family: bootstrap-icons !important;
			display: block;
			@include transition(all 500ms ease-in-out);
		}
		&.active:before {
			@include transform(rotate(90deg));
		}
	}
	.pxl-menu-hidden {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		&.open {
			>li {
				>.pxl-menu-hidden-toggle  {
					opacity: 1;
					visibility: visible;
				}
				>.sub-menu {
					height: 100%;
				}
				>a {
					position: relative;
					z-index: 9;
					span {
						opacity: 1;
						@include transform(translateY(0));
						visibility: visible;
					}
					.pxl-menu-toggle {
						pointer-events: auto !important;
					}
				}
			}
		}
		>li >a >span {
			padding: 14px 0;
		}
		li {
			&.menu-item {
				display: flex;
				align-items: center;
			}
			a {
				cursor: pointer;
				display: block;
				line-height: 50px;
				color: rgba($primary_color_hex, 0.7);
				font-size: 40px;
				font-weight: 600;
				padding: 0;
				width: 100%;
				transition: .5s 0ms;
				span {
					display: block;
					opacity: 0;
					overflow: hidden;
					@include transform(translateY(10px) rotateX(75deg));
					transform-origin: center top;
					@include transition(1s cubic-bezier(.68,-.55,.265,1.55));
					transition-delay: calc(.1s* var(--dsn-li-index));
					transition-property: opacity, visibility, transform;
					visibility: hidden;
				}
			}
			> a:hover,
			> a.current,
			&.current_page_item > a,
			&.current-menu-item > a,
			&.current_page_ancestor > a,
			&.current-menu-ancestor > a {
				color: $primary_color;
				letter-spacing: 2.5px;
				transform: skew(2deg);
			}
		}
		.sub-menu, .children {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			list-style: none;
			margin: 0;
			transform: translate(-50%,-50%);
			padding: 10px 0;
			transition: 1s cubic-bezier(.68,-.55,.265,1.55);
			transition-delay: .1s;
			pointer-events: none;
			max-height: 100%;
			overflow: hidden;
			.submenu-title {
				opacity: 0;
				transform: translateY(10px);
				transform-origin: center top;
				transition: 1s cubic-bezier(.68,-.55,.265,1.55);
				transition-delay: calc(.1s* 0.5);
				transition-property: opacity, visibility, transform;
				visibility: hidden;
				margin-right: 10px;
				margin-bottom: 14px;
			}
			li:not(.submenu-title) a span {
				background-color: rgba($fifth_color_hex, 0.1);
				border-bottom: 1px solid rgba($fifth_color_hex, 0.3);
				padding: 19px 30px;
			}
			&.open {
				pointer-events: auto !important;
				z-index: 9;
				overflow: auto;
				overflow-x: clip;
				&::-webkit-scrollbar {
					width: 5px;
					height: 5px;
				}
				&::-webkit-scrollbar-thumb {
					background: $sixth_color;
					@include border-radius(5px);
					background-clip: padding-box;
				}
				&::-webkit-scrollbar-thumb:hover {
					border: 0;
				}
				&::-webkit-scrollbar-track {
					background: $fourth_color;
					@include box-shadow(inset 0 0 6px rgba(0, 0, 0, 0.2));
				}
				>.submenu-title {
					display: inline-flex;
					flex-direction: column;
					opacity: 1;
					transform: translateY(0);
					visibility: visible;
					cursor: pointer;
					position: relative;
					overflow: hidden;
					height: 50px;
					font-size: 40px;
					line-height: 1.25;
					letter-spacing: 2.5px;
					font-weight: 500;
					span {
						display: inline-block;
						transition: .25s 0ms;
					}
					&:hover {
						.text-name {
							transform: translateY(-100%);
						}
						.text-back {
							bottom: 0;
						}
					}
					.text-back {
						position: absolute;
						display: flex;
						bottom: -100%;
						left: 0;
					}
				}
				>li {
					>.pxl-menu-hidden-toggle {
						opacity: 1;
						visibility: visible;
					}
					>a {
						span {
							opacity: 1;
							transform: translateY(0);
							visibility: visible;
						}
					}
				}
			}
			li {
				a {
					line-height: 1;
					// color: rgba($sixth_color_hex, 1.0);
					font-size: 18px;
					font-weight: 500;
					padding: 0;
				}
			}
		}
		> li > .sub-menu > li > .sub-menu > li a {
			padding-left: 28px;
		}
	}
}
.pxl-logo-nav1 {
	display: inline-flex;
	background-color: #040900;
	align-items: center;
	.pxl-logo-wrap {
		padding: 0 95px;
		img {
			max-height: 47px;
			width: auto;
		}
	}
	.pxl-nav-wrap {
		display: none;
		height: 118px !important;
		opacity: 1 !important;
	}
	.pxl-menu-primary {
		margin-right: 70px;
		> li {
			> a {
				color: #fff;
				font-size: 15px;
				line-height: 118px;
				&:before {
					content: '';
					width: 0;
					height: 2px;
					background-color: $primary_color;
					position: absolute;
					top: 50%;
					left: 0;
					margin: 11px auto 0 auto;
				}
			}
			&.menu-item-has-children > a {
				position: relative;
				.caseicon-angle-arrow-down {
					display: inline-flex;
					font-size: 10px;
					line-height: 1;
					margin-left: 6px;
					@include transition(.2s cubic-bezier(.24,.74,.58,1));
				}
			}
			&:hover > a .caseicon-angle-arrow-down {
				@include transform(rotateX(-180deg));
			}
			&:hover > a,
			&.current_page_item > a,
			&.current-menu-item > a,
			&.current_page_ancestor > a,
			&.current-menu-ancestor > a {
				&:before {
					width: 100%;
				}
			}
		}
	}
	.pxl-nav-button {
		width: 118px;
		height: 118px;
		background-color: #fff;
		position: relative;
		cursor: pointer;
		.pxl-nav-divider {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 40px;
			height: 40px;
			overflow: hidden;
			i {
				@include border-radius(1px);
				height: 2px;
				background-color: #000000;
				left: 0;
				position: absolute;
				@include transition(all 200ms linear 0ms);
				&:nth-child(1) {
					top: 7px;
					width: 40px;
					-webkit-transition-delay: 0.5s;
					transition-delay: 0.5s;
				}
				&:nth-child(2) {
					top: 19px;
					width: 22px;
					-webkit-transition-delay: 0.4s;
					transition-delay: 0.4s;
				}
				&:nth-child(3) {
					top: 31px;
					width: 22px;
					-webkit-transition-delay: 0.5s;
					transition-delay: 0.5s;
				}
				&:nth-child(4) {
					width: 40px;
					transform: rotate(45deg) translateX(100%);
					top: 30px;
					-webkit-transition-delay: 0s;
					transition-delay: 0s;
				}
			}
		}
		&.active {
			.pxl-nav-divider {
				i {
					width: 100%;
					&:nth-child(1), &:nth-child(3) {
						@include transform(translateX(-100%));
					}
					&:nth-child(1) {
						-webkit-transition-delay: 0s;
						transition-delay: 0s;
					}
					&:nth-child(2) {
						transform: rotate(-45deg);
					}
					&:nth-child(3) {
						-webkit-transition-delay: 0.2s;
						transition-delay: 0.2s;
					}
					&:nth-child(4) {
						transform: rotate(45deg) translateX(0%);
						top: 19px;
						-webkit-transition-delay: 0.7s;
						transition-delay: 0.7s;
					}
				}
			}
		}
	}
}