/* ====================================================== 
   <!-- Navigation -->                                    
/* ====================================================== */

/*
 * 1. Primary Menu
 * 2. Sub Menu (Using WordPress default class name )
 * 3. Mega/Dropdown Menu 
 * 4. Dropdown Arrow
*/



$nav-font-size    : 0.75rem;
$nav-sub-w        : 220px;
$nav-mega-li-w    : 270px;

.uix-menu__container:not(.is-mobile) {
	float: right;
	padding-top: 1.25rem;

	/*
	Do not use `position:relative`, it may cause the width calculation script 
	matching problem of the mega menu
	*/


	&.is-fixed {
		padding-bottom: 0;
	}
    

	
	/* 
	 ---------------------------
	 1. Primary Menu
	 ---------------------------
	 */ 
	ul.uix-menu {
		font-size: $nav-font-size;
		line-height: 2.34375;
		float: left;
		margin: 0; /* Required*/
		font-size: 0; /*Fighting the Space Between Inline Block Elements*/

		li {
			position: relative;
			margin-bottom: 0;
			padding: 0 1.159375rem;

			a {
				display: block;
				padding-left: 0.625rem;
			}
			

			
		}
		
		

		> li {
			display: inline-block;
			margin-right: 1.6875rem;
			padding-bottom: 1.421875rem;
			white-space: nowrap; /* Required*/
			font-size: $nav-font-size; /*Fighting the Space Between Inline Block Elements*/

			.uix-bubble {
				right: 1rem;
			}
			
			/* Sync to WordPress activation class name ".current-menu-item" */
			&.is-active, 
			&.current-menu-item {
				box-shadow: 0 2.15px 0 rgba(255, 255, 255, 1);
			} 

			
			> a {
				text-transform: uppercase;
				font-weight: 700;
				color: #DEDEDE;
				
				&:hover {
					color: #fff;
				}	
				
			}
			
			ul {
				
				min-width: $nav-sub-w;
				display: none;
				position: absolute;
				padding-bottom: 0.525rem;
				
				li {
					padding-left: 1.25rem;
				}	
			}

			> ul {
				padding-top: 2.625rem;
				opacity: 0;
                
				&::before {
					@include outer-shadow( 'regular' );
					content: '';
					display: block;
					height: 100%;
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					margin-top: 0.75rem;
					border: 1.15px solid rgba(var(--uix-primary-text-color), .1);
					background: #fff;
					border-radius: 8px;
				}

			}

		
		}


		/* 
		 ---------------------------
		 2. Sub Menu (Using WordPress default class name )
		 ---------------------------
		 */ 
		ul.sub-menu {
			top: 100%;
			left: 0;
			
				
			a {
				word-wrap: break-word;
				white-space: normal;
				/* Required*/
				line-height: 1.4;
				padding: 0.35rem 0;

				&:hover {
					color: #000;
					background: #F1F1F1;	
				}	
				
			}
			

		}

		> li:not(.multi-column) > ul {
			
			left: 1.784375rem;
			

			/* arrow of sub menu, not mega menu */
			&::after {
				content: "";
				display: block;
				position: absolute;
				top: 5px;
				left: 15px;
				width: 0;
				height: 0;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				border-bottom: 8px solid #fff;	
			}
			
			ul {
				top: 0;
				left: 100%;
				padding: 1.421875rem 0;
				margin-left: -0.071875rem;
				
				@include outer-shadow( 'regular' );
				border: 1.15px solid rgba(var(--uix-primary-text-color), .1);
				background: #fff;
				border-radius: 8px;

				ul {
					margin-left: 0;
				}
				
				
			}	
		}

	}


	/* 
	 ---------------------------
	 3. Mega/Dropdown Menu 
	 ---------------------------
	 */ 
	/* Multi-column */
	li.multi-column {

		span.multi-column-title {
			text-transform: uppercase;
			font-weight: 700;
			color: #B9B9B9;
			display: inline-block;
			cursor: default;
			padding-left: 1.159375rem;
		}

		
		> ul {
			width: auto;
			white-space: nowrap;
			display: none;
			padding: 0;
            
            /* add scrollbar to per column */
            max-height: calc(100vh - 50px);
            

			li {
				width: $nav-mega-li-w; /* Required, JS script needs to listen on it for calculation */
				overflow: hidden;
				display: inline-block;
				vertical-align: top;
				padding-left: 0.75rem;
                
                
                
                /* add scrollbar to per column */
                max-height: calc(100vh - 50px - 100px);
                overflow-y: auto;
				&::-webkit-scrollbar-track {
					border-radius: 0px;
					background-color: #fff;
				}

				&::-webkit-scrollbar {
					width: 3px;
					background-color: #FAFAFA;
                    transform: scaleY(0.8);
				}

				&::-webkit-scrollbar-thumb {
					border-radius: 0px;
					background-color:#FAFAFA;
				}

                
	
				.uix-bubble {
					right: 1.2rem;
				}
				
				
				a {
					
					&:hover {
						color: #000;
						background: #F1F1F1;	
					}	
				}


				ul {
					position: relative;
					box-shadow: none;
					
					/* Prevent JS script from disturbing */
					margin-top: 0 !important;
				}
			}
	
			
			ul {
				display: block;

				li {
					float: none;
					display: block;
				}

			}

			
		}

		.uix-menu__arrow-mega {
			content: '';
			display: none;
			position: absolute;
			top: 56px;
			left: 50%;
			width: 0;
			height: 0;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid #fff;
			opacity: 0;
			z-index: 1;
		}
		


	}


	ul.uix-menu ul.sub-menu .uix-menu__arrow {
		background-color: #000;
		right: 2.159375rem;
		margin-top: 0.3125rem;
	}

	li.multi-column > ul li .uix-menu__arrow {
		display: none;
	}

	/* 
	 ---------------------------
	 4. Dropdown Arrow
	 ---------------------------
	 */ 
	.uix-menu__arrow {
		display: block;
		position: absolute;
		right: 0.284375rem;
		top: 25%;
		background-color: #fff;
		width: 3px;
		height: 3px;
		border-radius: 100%;
	}

}


@media all and (max-width: 1250px) {
	.uix-menu__container:not(.is-mobile) {
		ul.uix-menu {
			> li {
				padding-left: 0.875rem;
				padding-right: 0.875rem;
				margin-right: 1.125rem;
			}	
		}	
	}

}


@media all and (max-width: 768px) {
	
    .uix-menu__container:not(.is-mobile) {
        display: none;
    }
}