.main-navigation {
	background-color: @navbar-bg-color;
	background-size: cover;
	position: relative;
	
	.nav-wrapper {
		position: relative;
	}

	.brand-logo {
		float: left;
		position: absolute;
		top: 50%;
		.translateY(-50%);
		& > img {
			max-height: @navbar-height;
		}
	}

	.text-logo {
		color: @navbar-text-logo-text-color;
		font-family: @navbar-text-logo-font-family;
		font-size: @navbar-text-logo-font-size;
		font-weight: @navbar-text-logo-font-weight;
		text-transform: uppercase;
	}

	ul {
		list-style-type: none;
		padding-left: 0;
	}

	.nav-list {
		& > .menu-item {
			display: inline-block;
			float: left;

			& > span > a {
				color: @navbar-text-color;
				display: block;
				font-family: @navbar-font-family;
				font-weight: @navbar-font-weight;
				letter-spacing: @navbar-letter-spacing;
				line-height: @navbar-line-height;
				padding: ((@navbar-height - @navbar-line-height) / 2) 12px;
				text-transform: uppercase;
				.transition(none);

				&:hover {
					background-color: @navbar-hover-bg-color;
					color: @navbar-hover-text-color;
				}
			}

			// &:last-child > span > a.menu-btn {
			// 	padding-right: 0;
			// }
		}
	}

	.menu-item {
		position: relative;
	}
	.sub-menu {
		display: none;
		position: absolute;
		right: 0;
		min-width: @navbar-dropdown-min-width;
		z-index: 9999;

		.menu-item-has-children > span > a:after {
			color: @navbar-text-color;
			content: "\f205";
		  font-family: MaterialDesignIcons;
		  font-size: @navbar-dropdown-arrow-font-size;
		  margin-top: -15px;
		  pointer-events: none;
		  position: absolute;
		  top: 50%;
		  right: 5px;
		}

		.menu-item-has-children > span > a:hover:after {
			color: @navbar-dropdown-hover-text-color;
		}

		li {
			a {
				background-color: @navbar-dropdown-bg-color;
				border-bottom: 1px solid @navbar-dropdown-border-color;
				color: @navbar-text-color;
				display: block;
				font-weight: @navbar-dropdown-font-weight;
				// margin-top: @navbar-dropdown-gap;
				padding: 12px 20px;
				.transition(none);

				&:hover {
					background-color: @navbar-dropdown-hover-bg-color;
					color: @navbar-dropdown-hover-text-color;
				}
			}

			&:last-child a {
				border-bottom: 0;
			}
		}

		.sub-menu {
			top: 0;
			right: 100%;
		}
	}

	.menu-btn {
		cursor: pointer;
		// position: relative;
		// top: 4px;
		
		.menu-icon-bar {
			background-color: @navbar-menu-button-color;
			display: block;
			height: 2px;
			margin-bottom: 3px;
			width: 20px;
			.transition(all @main-animation);
			&:first-child { margin-top: 4px; }
			&:last-child { margin-bottom: 0; }
		}

		&.mobile {
			margin-top: 15px;
			top: 50%;
			right: 0;
		}

		&:hover {
			background-color: @navbar-menu-button-hover-bg-color !important;

			.menu-icon-bar:first-child {
				width: 15px;
				.rotate(-35deg);
			}

			.menu-icon-bar:last-child {
				width: 15px;
				.rotate(35deg);
			}
		}
	}

	.icon-btn {
		cursor: pointer;
		height: @navbar-height;
		padding-right: 10px !important;
		// padding-bottom: ((@navbar-height - @navbar-line-height) / 2 - 4) !important; // Search icon is 8px bigger than base font size. 8px / 2 = 4px
		padding-left: 10px !important;

		.mdi {
			color: @navbar-icon-button-color;
			font-size: @navbar-icon-button-font-size;
		}

		&.mobile {
			height: @navbar-mobile-icon-button-height !important;
			margin-top: -10px;
		  margin-right: 15px;
			position: relative;
		  top: 50%;

		  &:hover .mdi {
				color: @navbar-mobile-icon-button-hover-color;
			}
		}

		&:hover .mdi {
			color: @navbar-icon-button-hover-color;
		}

		&.cart-btn {
			padding-right: 20px !important;
			// padding-bottom: ((@navbar-height - @navbar-line-height) / 2 - 4 + 2) !important; // Cart icon is 2px smaller than other icons on the menu. So it adds 2px on padding bottom.
			position: relative;

			.mdi {
				font-size: @navbar-icon-button-cart-font-size;
			}
		}
	}
}

.main-navigation.sticky {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
}

.main-navigation.transparent {
	background-color: @navbar-transparent-bg-color;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;

	.nav-list > .menu-item > span > a {
		color: @navbar-transparent-text-color;
		padding-top: 30px;
		padding-bottom: 30px;
		position: relative;

		&:before {
			background-color: #fff;
			content: "";
			position: absolute;
			top: 0;
		  left: 0;
		  width: 100%;
		  height: 3px;
		  .transition-transform(@main-animation);
		  .translateY(-3px);
		}

		&:hover {
			background-color: @navbar-transparent-hover-bg-color;

			&:before {
				.translateY(0);
			}
		}
	}

	.text-logo {
		color: @navbar-transparent-text-logo-text-color;
	}

	.menu-btn .menu-icon-bar {
		background-color: @navbar-transparent-menu-button-color;
	}

	.icon-btn {
		height: @navbar-transparent-height;

		.mdi {
			color: @navbar-transparent-icon-button-color;
		}
	}

	.menu-item-cart .item-count {
		margin-top: 10px;
	}
}

.main-navigation.sticky-transparent {
	position: fixed;

	.nav-list > .menu-item > span > a {
		.transition(padding @main-animation);
	}

	.menu-item-cart .item-count {
		.transition(margin-top @main-animation);
	}

	// .brand-logo {
	// 	.transition(opacity @main-animation);
	// }

	&.transparent .brand-logo.contrast {
		opacity: 0;
	}
}

.menu-item-cart {
	.item-count {
		background-color: @navbar-cart-count-bg-color;
		border-radius: @navbar-cart-count-border-radius;
	  color: @navbar-cart-count-text-color;
	  font-size: 10px;
	  letter-spacing: @navbar-cart-count-letter-spacing;
	  position: absolute;
	  top: 10px;
	  right: 10px;
	  text-align: center;
	  width: @navbar-cart-count-width;
	  height: @navbar-cart-count-height;
	}

	.sub-menu {
		min-width: @navbar-cart-min-width;

		& > .menu-item {
			background-color: @navbar-dropdown-bg-color;
		}
	}

	.woocommerce.widget_shopping_cart .cart_list {
		li {
			padding-bottom: 4px;
			padding-left: 25px;

			&:first-child a {
		  	padding-top: 20px;

		  	&.remove { padding-top: 12px; }
		  }

		  &:last-child {
		  	padding-bottom: 16px !important;
		  }

		  &.empty {
		  	padding-bottom: 20px !important;
		  }
		}

		li a.remove {
			color: @navbar-cart-remove-icon-color !important;
			padding: 4px 0 0 15px;
			top: -1px !important;
		}

		li a {
			border-top: 0;
			line-height: @navbar-cart-title-line-height;
		  padding-bottom: 0;
			padding-left: 10px;
		  .transition(color @main-animation);

		  &:hover {
		  	background-color: @navbar-cart-title-hover-bg-color;
		  	color: @navbar-cart-title-hover-text-color;
		  }
		}

		.quantity {
		  padding-left: 10px;
		  top: 0;
		}

		.empty {
			background-color: @navbar-dropdown-bg-color;
			font-weight: @navbar-cart-empty-font-weight;
			padding: 20px !important;
		}
	}

	.total {
		border-top-color: @navbar-cart-total-border-color !important;
		margin-bottom: 0;
		padding: 14px 20px !important;
	}

	.buttons {
		margin-bottom: 0;
		padding-right: 20px;
		padding-left: 20px;

	  .button.wc-forward {
	  	background-color: @navbar-cart-button-bg-color;
	  	border-top: 0;
	  	color: @navbar-cart-button-text-color !important;
	  	font-weight: @navbar-cart-button-font-weight;
		  padding: 7px 16px !important;
		  text-align: center;
		  .transition(background-color @main-animation);

		  &.checkout {
		  	margin-top: 5px;
		  	margin-bottom: 20px;
		  }

		  &:hover {
		  	background-color: @navbar-cart-button-hover-bg-color;
		  }
	  }
	}
}

#mondo-search-fill {
	background-color: @search-fill-bg-color;
	display: none;
	opacity: 0;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2000;
}

.search-close {
	display: none;
	opacity: 0;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2001;

  .mdi {
  	color: @search-large-form-color;
  	font-size: @search-close-icon-font-size;
  	.transition-transform(@main-animation);
  }

  &:hover .mdi {
  	.rotate(90deg);
  }
}