// --------------------------------------------------------------------------------------------
// NAVIGATION / #basel-navigation
// --------------------------------------------------------------------------------------------

// ------------------------------------------
// DEFAULT NAVIGATION STYLE
// ------------------------------------------

.header-shop,
.header-categories,
.header-simple {

	.main-nav {

		> h5 {
			padding-top:20px;
			padding-bottom:20px;
		}
	}
}

.basel-navigation {
	@include white-background;

	.menu {
		line-height: 1.3;

		li {

			&.item-with-label {

				> a {
					position: relative;
				}
			}
		}

		> li {

		 	a {

		 		i {
		 			margin-right: 2px;
					opacity: 0.7;
		 		}
		 	}
		 	
			> a {
		 		text-decoration: none;
		 		letter-spacing: .5px;
		 		text-transform: uppercase;
		 		-webkit-transition:all 0.2s ease;
				transition:all 0.2s ease;

			 	&:hover {
			 		text-decoration: none;
			 	}
			}

			.sub-menu-dropdown {
				background-position: bottom right;
				background-repeat: no-repeat;
				background-clip: border-box;
				background-color: white;
			}

		 	&.menu-item-has-children {

				> a {
					position: relative;

					&:after {
						position: absolute;
						top: 50%;
						margin-top: -7px;
						@include font-icon-base;
						line-height:14px;
						font-weight:normal;
					}
				}
			}
			
			// ------------------------------------------
			// Menu design default 
			// ------------------------------------------

			&.menu-item-design-default {
				position: relative;
		 			
		 		.sub-menu-dropdown {
					position: absolute;
					left: 0;
					width: 180px;
					padding-top:12px;
					padding-bottom:12px;
					z-index: 300;
					visibility: hidden;
					opacity: 0;
					-webkit-transition:all 0.25s ease 0.1s;
					transition:all 0.25s ease 0.1s;
				}

				.container {
					width: auto;
					padding: 0;
				}

				ul {

					li {
						display: block;
						position: relative;

						a {
							display: inline-block;
							padding-left:15px;
							padding-right:15px;
							padding-top:11px;
							padding-bottom:11px;
							color: #3C3C3C;
							font-size:13px;
							font-weight: normal;
							letter-spacing: 0.3px;
							text-decoration:none;
							text-transform: uppercase;
							-webkit-transition:all 0.2s ease-in-out;
							transition:all 0.2s ease-in-out;
						}

						&.menu-item-has-children {

							> a {
								padding-right:20px;
							}

							&:after {
								@include font-icon($icon-angle-right);
								position: absolute;
								color:#bbb;
								right: 14px;
								top: 50%;
								margin-top: -8px;
								line-height: 14px;
							}
						}

						&:hover {

							> ul {
								opacity: 1;
								visibility: visible;
								left: 100%;
							}

							> a {
								color:$primary-color;
								margin-left: 5px;
							}
						}
					}
				}

				.sub-sub-menu {
					position: absolute;
					top: 0;
					left: 80%;
					width: 180px;
					background-color: white;
					visibility: hidden;
					opacity: 0;
					padding-top:12px;
					padding-bottom:12px;
					-webkit-transition:all 0.2s ease;
					transition:all 0.2s ease;
					@include shadow-drop-element;

					&.color-scheme-light { 
						background-color: rgba(0, 0, 0, 0.95);
					}
				}
			}

			// ------------------------------------------
			// Menu design sized
			// ------------------------------------------
						
			&.menu-item-design-sized {
				position: relative;
			 			
				.container {
					width: auto;
					padding: 0;
				}
			}

			// ------------------------------------------
			// Menu design full-width and sized
			// ------------------------------------------

			&.menu-item-design-full-width,
			&.menu-item-design-sized {

				> .sub-menu-dropdown {
					position: absolute;
					left: 0;
					z-index: 300;
					visibility: hidden;
					opacity: 0;
					-webkit-transition:all 0.25s ease 0.1s;
					transition:all 0.25s ease 0.1s;
				}

				.vc_row {

					.sub-menu {

						> li {
							width: auto;
						}
					}
				}
					
				.sub-menu {
					@include clear-element;

					li {

						a {

							&:hover {
								color:$primary-color;
							}
						}
					}

					> li {
						float: left;
						width: 200px;
						margin-right: 10px;
						margin-bottom: 20px;

						> a {
							display:inline-block;
							font-family: $title-font;
							font-size: 16px;
							font-weight:600!important;
							letter-spacing: 0.3px;
							line-height: 1.4;
							text-transform: uppercase;
							color: #1B1919;
							text-decoration:none;
							margin-bottom: 10px;
						}
					}
				}

				.sub-sub-menu {

					li {
						display: block;

						a {
							display: inline-block;
							font-size: 14px;
							font-weight: normal;
							padding: 8px 0;
							color: #3C3C3C;
							letter-spacing: 0.3px;

							&:hover  {
								text-decoration: none;
								margin-left: 5px;
							}

							.menu-label {
								right:-25px;
								left:auto;
								margin-top: -14px;
							}
						}
					}
				}
			}

			.sub-menu-dropdown {

				&.color-scheme-light {
					background-color: rgba(0, 0, 0, 0.95);

					.sub-menu {

						> li {

							> a {
								color:white;

								&:hover {
									color: rgba(255,255,255,0.6);
								}
							}
						}
					}

					.sub-sub-menu {

						li {

							a {
								color:white;

								&:hover {
									color: rgba(255,255,255,0.6);
								}
							}
						}
					}

					h1,h2,h3,h4,h5,h6,
					h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,
					.widgettitle,
					.widget-title,
					label {
						color:rgba(255,255,255,1);
					}

					p {
						color:rgba(255,255,255,0.8);
					}

					.price {
						color:white;

						.amount {
							color:white;
						}

						del {
							color:rgba(255,255,255,0.5);

							> .amount {
								color:rgba(255,255,255,0.5);
							}
						}
					}

					.btn-add > a {
						color:white;
					}
				}
			}

			&.item-event-hover:hover > .sub-menu-dropdown,
			&.item-event-click.item-menu-opened > .sub-menu-dropdown {
				visibility: visible;
				opacity: 1;
			}

			&.callto-btn {
			
				> a {
					height: auto;
					text-align: center;
					line-height: 18px;
					font-size: 14px;
					padding: 11px 21px;
					margin-left: 12px;
					margin-right: 12px;
					text-transform: uppercase;
					letter-spacing: .3px;
					border-radius: 0;
					@include btn-color-primary;
					transition: all .2s ease;
					-webkit-transition: all .2s ease;
				}
	
				&.menu-item-has-children {
					margin-right: 0;
	
					> a {
						padding-right: 25px;
	
						&:after {
							right: 10px;
							color: white;
						}
					}
				}

				&.current-menu-item {

					> a {
						color: white;
					}
				}
			}
		}
	}
}



// ------------------------------------------
// MAIN NAVIGATION STYLE
// ------------------------------------------ 

.main-nav {

	.menu {
		margin-left: -12px;
		margin-right: -12px;

		li {
			text-align:left;
		}

		> li {
			display: inline-block;
	 		margin-left: -2px;

			a {

				i {
					font-size:14px;
					min-width:22px;
				}
			}

	 		> a {
	 			display: inline-block;
	 			text-transform:uppercase;
	 			font-size:14px;
	 			padding-left:13px;
	 			padding-right:13px;
	 			height:50px;
	 			line-height:50px;
	 			color:rgba(0,0,0,0.9);

				> i {
		 			margin-right: 4px;
					min-width: 0;
					font-size: 14px;
	 			}

	 			&:hover,
	 			&:focus {
	 				color:$primary-color;
	 			}
	 		}

	 		&.menu-item-has-children {
	 			margin-right: 5px;

				> a {

					&:after {
						@include font-icon-content($icon-angle-down);
						right: 1px;
						font-size: 12px;
						color:#bbb;
					}
				}

				&:last-child {
					margin-right: 0;
				}
			}

			&.current-menu-item {

				> a {
					color:$primary-color;
				}
			}

			&.onepage-link {

				&.current-menu-item {

					> a {
						color:$primary-color;
					}
				}				
			}

			.sub-menu-dropdown {
				top: 70%;
				@include shadow-drop-element;
			}

			// &:first-child {

		 // 		> a {
		 // 			padding-left: 0;
		 // 		}
		 // 	}
		 
			// ------------------------------------------
			// Menu design full width
			// ------------------------------------------

			&.menu-item-design-full-width {

				.sub-menu-dropdown {
					width: 100%;
					padding: 30px 0 5px 0;
				} 
			}
			
			// ------------------------------------------
			// Menu design sized
			// ------------------------------------------

		   	&.menu-item-design-sized {
						
				.sub-menu-dropdown {
					padding: 30px 30px 10px 30px;
					-webkit-transition:opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s, top 0.2s ease 0.1s;
					transition:opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s, top 0.2s ease 0.1s;
				}
			}

			&.item-event-hover:hover > .sub-menu-dropdown,
			&.item-event-click.item-menu-opened > .sub-menu-dropdown {
				top:100%;
			}
		}
	}

	// ------------------------------------------
	// color scheme light in main navigation 
	// ------------------------------------------

	.color-scheme-light & {
		
		.menu {

			> li {

				> a {
					color:rgba(255,255,255,1);

					&:hover,
					&:focus {
						color:rgba(255,255,255,.8);
					}
				}

				&.menu-item-has-children {

					> a {

						&:after {
							color:rgba(255,255,255,1);
						}
					}
				}

				&.current-menu-item {

					> a {
						color:white;
					}
				}
			}
		}
	}

	// ------------------------------------------
	// align menu
	// ------------------------------------------

	&.menu-center {
		text-align:center;
	}

	&.menu-right {
		text-align:right;
	}
}

.menu-item-language {
	position:relative;
}

.submenu-languages {
	position: absolute;
	top: 63px;
	left: 13px;
	display:none;
}

.menu-item-language:hover .submenu-languages {
	display:block;
}

// ------------------------------------------
// COMPOSER ELEMENT "MENU LIST"
// ------------------------------------------

.mega-menu-list {

	li {

		&.item-with-label {

			a {
				position: relative;
			}
		}
	}

	> li {
	
		> a {
			display:inline-block;
			font-family: $title-font;
			font-size: 16px;
			font-weight: 600 !important;
			letter-spacing: 0.3px;
			line-height: 1.4;
			text-transform: uppercase;
			color: #1B1919;
			text-decoration:none;
			margin-bottom: 10px;

			&:hover {
				color:$primary-color;
			}
		}
	}

	.sub-sub-menu {

		li {
		
			a {
				display: inline-block;
				font-size: 14px;
				font-weight: normal;
				padding: 8px 0;
				color: #3C3C3C;
				letter-spacing: 0.3px;
				line-height: 1.3;

				&:hover {
					text-decoration: none;
					margin-left: 5px;
					color:$primary-color;
				}
			}
		}

		.menu-label {
			right: -25px;
			margin-top: -14px;
		}
	}

	.basel-dark &,
	.color-scheme-light & {

		> li {
		
			> a {
				color:$dark-link-color;
	
				&:hover {
					color:$dark-link-hover-color;
				}
			}
		}

		.sub-sub-menu {
	
			li {
			
				a {
					color:$dark-link-hover-color;
	
					&:hover  {
						color:$dark-link-hover-color;
					}
				}
			}
		}
	}
}

// ------------------------------------------
// VERTICAL MEGA MENU
// ------------------------------------------

.widget_nav_mega_menu {

	.widget-title {
		color: black;
		background-color: #F1F1F1;
		display: block;
		margin-bottom: 0;
		font-size: 16px;
		line-height: 1.4;
		text-align: left;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		font-weight: bold;
		padding: 22px 20px 22px 20px;

		&:before {
			content:none;
		}

		&.color-scheme-light {
			color:white;
			background-color: rgba(0, 0, 0, 0.23);
		}
	}
}

.widget_nav_mega_menu,
.mega-navigation {
	position: relative;

	.menu {
		border-bottom: 3px solid rgba(0, 0, 0, 0.23);

		li {
			margin-bottom: 0;
		}

		.sub-menu-dropdown {
			border: 2px solid rgba(168, 168, 168, 0.2);
		}

		> li {
			display: block;
			margin-left: 0;
			-webkit-transition:all 0.2s;
			transition:all 0.2s;

			a {

				i {
					font-size:16px;
					min-width:24px;
					opacity: 1;
				}
			}

			> a {
				display:block;
				padding: 14px 20px;
				color: white;
				line-height:1.3;
				text-transform: uppercase;
				font-weight: bold;
				font-size: 12px;

				&:focus {
					color: white;
				}
			}

			&.item-with-label {

				> a {
					
					.menu-label {
						right: 18px;
					}
				}
			}

			&.menu-item-has-children {

				> a {
					padding-right: 25px;

					&:after {
						@include font-icon-content($icon-angle-right);
						right: 20px;
						color:white;
						font-size: 14px;
					}
				}
			}
			
			// ------------------------------------------
			// all types of design of menu
			// ------------------------------------------

			&.menu-item-design-default,
			&.menu-item-design-full-width,
			&.menu-item-design-sized {
				
				.sub-menu-dropdown {
					left: 90%;
					top: 0;
				}
			}

			// ------------------------------------------
			// menu design default
			// ------------------------------------------

			&.menu-item-design-default {

				&.item-event-hover:hover > .sub-menu-dropdown,
				&.item-event-click.item-menu-opened > .sub-menu-dropdown {
					margin-left:0;
					margin-top:-1px;
				}
			}
			
			// ------------------------------------------
			// menu design full width
			// ------------------------------------------

			&.menu-item-design-full-width {

				.sub-menu-dropdown {
					width: 826px;
					padding:25px 30px 5px 30px;

					.container {
						width: auto;
						padding: 0;
					}
				} 
			}
			
			// ------------------------------------------
			// menu design sized
			// ------------------------------------------

		   	&.menu-item-design-sized {
		   		position: static;
						
				.sub-menu-dropdown {
					padding:25px 30px 5px 30px;
				}
			}

			&:last-child {
				border-bottom: none;
			}

			&:hover {
				background-color: $alternative-color;

				> a {
					color:white;
				}
			}

			&.item-event-hover:hover > .sub-menu-dropdown,
			&.item-event-click.item-menu-opened > .sub-menu-dropdown {
				left: 100%;
				margin-left:0;
			}
		}
	}
}

//**** SHOW MORE CATEGORIES ****//

.mega-navigation {

	.menu {
		
		.basel-more-cat-btn {
			background-color: rgba(0, 0, 0, 0.23);

			> a {
				position: relative;
				justify-content: center;
				text-align: center;
				font-size: 14px;
				font-style: normal;
				padding-top: 8px;
				padding-bottom: 8px;
	
				&:after {
					@include font-icon($icon-angle-down);
				}
			}
		}
	}
}

// ------------------------------------------
// WIDGET CATEGORY
// ------------------------------------------ 

// .widget_nav_mega_menu {

// 	.menu {

// 	    > li {
// 	        border-bottom:none;
// 		    padding-left: 20px;
// 		    padding-right: 20px;

// 	        > a {
// 	            padding-left:5px;
// 	            padding-right:0;
// 	            border-bottom:1px solid rgba(124, 124, 124, 0.15);
// 	        }

// 	        &.menu-item-has-children {

// 	            > a {
// 	            	padding-right: 15px;

// 	                &:after {
// 	                    right: 5px;
// 	                }
// 	            }
// 	        }

// 			&:last-child {

// 	        	> a {
// 	        		border-bottom:none;
// 	        	}
// 	        }

// 	        &:hover {
// 				padding-left:25px;
// 	      	}
// 		}
// 	}
// }


// ------------------------------------------
// VERTICAL MEGA MENU IN HEADER 5
// ------------------------------------------ 

.categories-menu-dropdown {
	position: absolute;
	top: 124%;
  	left: 0;
	z-index: 299;
	background-color: inherit;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition:all 0.2s ease 0.1s;
	transition:all 0.2s ease 0.1s;
}

// ------------------------------------------
// WIDGET MEGA MENU IN RIGHT SIDEBAR
// ------------------------------------------ 

.sidebar-right {

	.widget_nav_mega_menu {

		.sub-menu-dropdown {
			display:none;
		}

		li.menu-item-has-children {

			a {
				&:after {
					display:none;
				}
			}
		}
	}
}

// ------------------------------------------
// MOBILE NAVIGATION
// ------------------------------------------ 

$mobile-nav-width: 270px;

.mobile-nav-from-right {
	
	.mobile-nav {
		right: 0;
		transform:translate3d($mobile-nav-width, 0, 0);
		-webkit-transform:translate3d($mobile-nav-width, 0, 0);
		-ms-transform:translate3d($mobile-nav-width, 0, 0);
		-sand-transform:translate3d($mobile-nav-width, 0, 0);
	}
}

.mobile-nav-from-left {
	
	.mobile-nav {
		left: 0;
		transform:translate3d(-$mobile-nav-width, 0, 0);
		-webkit-transform:translate3d(-$mobile-nav-width, 0, 0);
		-ms-transform:translate3d(-$mobile-nav-width, 0, 0);
		-sand-transform:translate3d(-$mobile-nav-width, 0, 0);
	}
}

.mobile-nav {
	width: $mobile-nav-width;
	display: none;
	position: fixed;
	top: 0;
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
	background-color:#0C0C0C;
	z-index: 500;
	-webkit-transition:transform .3s ease;
	transition:transform .3s ease;

	ul {
		
		li {
			display: block;	
			position: relative;

			a {
				display: block;
				padding-top:12px;
				padding-bottom:12px;
				padding-right:15px;
				padding-left:15px;
				font-size: 16px;
				line-height: 26px;
				overflow-x: hidden;
				letter-spacing: 0.3px;
				text-transform: uppercase;
				color: rgba(255, 255, 255, 0.8);
				border-bottom: 1px solid rgba(92, 92, 92, 0.23);

				&:hover {
					text-decoration:none;
					color: #ffffff;
				}

				&:active {
					color: #ffffff;
					background-color: #3C3C3C;
				}

				i {
					min-width: 22px;
					margin-right: 2px;
				}

				.menu-label {
					position: relative;
					display: inline-block;
					top: 4px;
					right: auto;
					margin-left: 5px;
					opacity: 1;

					&:after {
						display: none;
					}
				}
			}

			&.current-menu-item {

		 		> a {
		 			color: $primary-color;		
		 		}
	 		}

			&.menu-item-has-children {

				> a {
					padding-right: 43px;
				}
			}
		}
	}

	.sub-menu-dropdown {

		.container {
			width: auto;
			display: block;
			padding: 0;
		}

		ul {
			display: none;
			position: relative;
			background-color: #171717;

			&:before {
				@include font-icon($icon-caret-up);
				position: absolute;
				bottom: 100%;
				margin-bottom: 4px;
				left: 20px;
				font-size: 30px;
				line-height: 0;
				color: #171717;
			}
		}

		li {

			a {
				font-size: 14px;
			}

			ul {
				background-color: #1D1D1D;

				&:before {
					color: #1D1D1D;
				}
			}
		}
	}

	// ------------------------------------------
	// SEARCH MENU
	// ------------------------------------------

	.searchform {
		position: relative;
		padding:10px;
		border-bottom: 2px solid rgba(92, 92, 92, 0.43);

		&.search-loading {

			&:after {
				position: absolute;
				top: 50%;
				margin-top:-9px;
				right: 27px;
				@include loader(18px, 2px);
				@include act-loader;
				border-color:#bbbbbb;
			}

			#searchsubmit {
				display:none;
			}
		}

		// .screen-reader-text {
		// 	display: none;
		// }

		input[type="text"] {
			background-color: rgba(255, 255, 255, 0.1);
			border: none;
			border: 1px solid rgba(208, 208, 208, 0.09);
			padding: 14px 50px 14px 18px;
			font-size: 14px;
			color: white;
			height: 48px;
		}

		::-webkit-input-placeholder {color:rgba(255,255,255,0.8);}
		::-moz-placeholder          {color:rgba(255,255,255,0.8);}//* Firefox 19+ *//
		:-moz-placeholder           {color:rgba(255,255,255,0.8);}//* Firefox 18- *//
		:-ms-input-placeholder      {color:rgba(255,255,255,0.8);}

		button {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 0;
			border:none;
			background-color: transparent;
			padding: 0;
			width: 50px;
			color: rgba(255,255,255,0.8);
			text-align: center;

			&:before {
				content: "\e090";
				display: inline-block;
				line-height: 48px;
				font-size: 20px;
				font-family: 'simple-line-icons';
			}
		}
	}

	.search-results-wrapper {

		.basel-scroll {
			position: relative;
			
			.basel-scroll-content {
				max-height: 60vh;
			}
		}
	}

	.autocomplete-suggestions {
		background-color:#0C0C0C;
		border: none !important;

		.autocomplete-suggestion {
			margin-left: 5px;
			margin-right: 5px;
		}

		.suggestion-title,
		.suggestion-divider-text {
			color: #FFF;
		}

		.suggestion-sku,
		.amount {
			color: rgba(255,255,255,.8);
		}

		.view-all-result {

			span {
				color: #FFF;
			}

			&:hover,
			&:focus {

				span {
					color: rgba(255,255,255,.8);
				}
			}
		}
	}

	// ------------------------------------------
	// Icon SUB MENU
	// ------------------------------------------

	.icon-sub-menu {
		position: absolute;
		top: 0;
		right: 0;
		height: 49px;
		width: 49px;
		padding-right: 0;
		border-left: 1px solid rgba(92, 92, 92, .23);
		@include close-btn(right, 2px, 12px, #FFF);

		&:after,
		&:before {
			right: 50%;
			margin-right: -5px;
		}

		&:after {
			transform: translateX(-4px) rotate(50deg);
			-webkit-transform: translateX(-4px) rotate(50deg);
			-ms-transform: translateX(-4px) rotate(50deg);
		}

		&:before {
			transform: translateX(3px) rotate(-50deg);
			-webkit-transform: translateX(3px) rotate(-50deg);
			-ms-transform: translateX(3px) rotate(-50deg);
		}

		&.up-icon {

			&:before {
				transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
				-ms-transform:rotate(-45deg);
			}

			&:after {
				transform:rotate(45deg);
				-webkit-transform:rotate(45deg);
				-ms-transform:rotate(45deg);
			}
		}
	}
}

.act-mobile-menu {
	overflow: hidden;

	.basel-close-side {
		opacity:1;
		visibility:visible;
	}

	.mobile-nav {
		transform:translate3d(0, 0, 0);
		-webkit-transform:translate3d(0, 0, 0);
		-ms-transform:translate3d(0, 0, 0);
		-sand-transform:translate3d(0, 0, 0);
	}
}

// ------------------------------------------
// CALL TO ACTION BTN IN MAIN MENU
// ------------------------------------------ 

.main-header:not(.header-vertical),
.sticky-header {

	.basel-navigation {

		.menu {

			> li {

				&.callto-btn {

					> .sub-menu-dropdown {
						top: calc(120% + 20px);
						top: -webkit-calc(120% + 20px);
						left: 12px;
						
						&:before {
							content: "";
							position: absolute;
							left: 0;
							bottom: 100%;
							height: 20px;
							width: 100%;
						}
					}
	
					&.menu-item-design-full-width {
	
						>.sub-menu-dropdown {
							left: 0;
						}
					}
		
					&.item-event-hover:hover > .sub-menu-dropdown,
					&.item-event-click.item-menu-opened > .sub-menu-dropdown {
						top: calc(100% + 20px);
						top: -webkit-calc(100% + 20px);
					}
				}
			}
		}
	}
}

.act-scroll { //fixed header callto btn style

	.main-nav {

		.menu {

			> li {

				&.callto-btn {

					> a {
						height: auto !important;
						line-height: 18px !important;
					}
				}
			}
		}
	}	
}