@menuitem-padding-x: 15px;
@menuitem-padding-y: 12px;
@sub-menu-width: 150px;
@menu-height: 41px;

/* -------------------------------------------------------------------------- */

@main-menu-hover-background-local: @main-menu-hover-background;

/* Level 1 */
@menu-level1-bg: @css_menu_background;
@menu-level1-color: @css_submenu_color;
@menu-level1-hover-bg: @menu-level1-bg;
@menu-level1-hover-color: @css_submenu_hover_color;

/* Level 2+ */
@menu-level2-bg: @css_menu_background;
@menu-level2-color: @css_submenu_color;
@menu-level2-hover-bg: @menu-level1-bg;
@menu-level2-hover-color: @css_submenu_hover_color;

/* -------------------------------------------------------------------------- */

#menus {
	position: relative;
	z-index: 210;
	min-height: @menu-height;
}

#main-menu .menu {
	position: relative;
	min-height: @menu-height;
	font-size: 0;

	// any menu item
	.menu-item {
		position: relative;
		margin: 0;
		padding: 0;
		list-style: none;
		cursor: pointer;

		&:hover > .sub-menu-wrapper > .sub-menu {
			display: block;
		}

		a {
			display: block;
			padding: .3em .6em;
			text-decoration: none;
			transition: color .3s;

			strong {
				font-weight: normal;
			}
		}

		&.home > a {
			@home-icon-size: 16px;
			width: @home-icon-size;
			text-align: left;
			text-indent: -6000px;
			position: relative;

			&:before {
				position: absolute;
				top: 4px;
				left: @menuitem-padding-x/2;
				z-index: 5;
				width: @home-icon-size;
				height: @home-icon-size;
				content: icon(theme-home3);
				text-indent: 0 !important;
				font-size: @home-icon-size;
				font-family: theme;
			}
		}
	}

	// any sub menu
	.sub-menu {
		position: absolute;
		top: 0;
		z-index: 200;
		display: none;
		margin: 0 auto auto 0;
		width: @sub-menu-width;
		text-align: left;
		border-radius: 5px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);

		a {
			font: e(@menu-font-weight) @menu-font-size @menu-font-face;
			word-wrap: break-word;
		}
	}

	body.sticky-header-type-over.sticky-header.wpv-not-scrolled & {
		> .menu-item {
			&:not(.current-menu-parent):not(.current-menu-item):not(.current-menu-ancestor):not(.current-menu-ancestor):not(:hover) {
				> a {
					&, &:visited {
						color: @main-menu-sticky-color;
					}
				}
			}
		}
	}

	// first level
	> .menu-item {
		padding: 9px 5px 5px 0;
		background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
		// float: left;
		display: inline-block; // 1px transparent gif, otherwise IE won't extend the element to contain its children

		> a {
			border-bottom: 2px double transparent;

			&, &:visited {
				color: @menu-font-color;
				font-weight: e(@menu-font-weight);
				font-size: @menu-font-size;
				font-family: @menu-font-face;
				line-height: 16px;
			}
		}

		&.current-menu-parent,
		&.current-menu-item,
		&.current-menu-ancestor,
		&.current-menu-ancestor,
		&:hover {
			border-bottom-color: @css_menu_hover_color;

			> a {
				padding-top: .3em;
				padding-bottom: .3em;
				background-color: @main-menu-hover-background-local;
				color: @css_menu_hover_color;
				text-decoration: none;
			}
		}

		&:hover > .sub-menu-wrapper {
			padding-top: 25px;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
		}

		// second level
		> .sub-menu-wrapper > .sub-menu {
			left: 50%;
			margin: 0 auto auto -@sub-menu-width/2;
			padding: 10px 0;
			background: @menu-level1-bg;

			&:before {
				@size: 8px;

				position: absolute;
				top: -@size + 1px;
				left: @sub-menu-width/2-@size;
				width: 0;
				height: 0;

				border: @size solid transparent;
				border-top: 0;
				border-bottom: (@size - 1px) solid @menu-level1-bg;

				content: "";
			}

			.menu-item {
				> a {
					padding: .6em @menuitem-padding-x;
					color: @menu-level1-color;
				}

				&.current-menu-parent,
				&.current-menu-item,
				&.current-menu-ancestor,
				&.current-menu-ancestor,
				&:hover {
					background: @menu-level1-hover-bg;

					> a {
						text-decoration: none;
						color: @menu-level1-hover-color;
					}
				}

				// lower levels
				.sub-menu-wrapper {
					left: 100%;
					top: 0;
					position: absolute;
					padding-left: @menuitem-padding-x;

					.sub-menu {
						position: relative;
					}
				}

				.sub-menu {
					&:before {
						@size: 8px;

						position: absolute;
						top: 10px;
						left: -@menuitem-padding-x;
						width: 0;
						height: 0;

						border: @size solid transparent;
						border-left: (@size - 1px) solid @menu-level1-bg;
						border-right: 0;

						content: "";
					}

					.menu-item {
						background-color: @menu-level2-bg;

						> a {
							.border-box();
							display: inline-block;
							padding: .6em @menuitem-padding-x;
							width: 100%;
							color: @menu-level2-color;
						}

						&.current-menu-parent,
						&.current-menu-item,
						&.current-menu-ancestor,
						&.current-menu-ancestor,
						&:hover {
							color: @menu-level2-hover-bg;

							> a {
								text-decoration: none;
								color: @menu-level2-hover-color;
							}
						}

						&:first-child {
							border-top-left-radius: 5px;
							border-top-right-radius: 5px;
							padding-top: 5px;
						}

						&:last-child {
							border-bottom-left-radius: 5px;
							border-bottom-right-radius: 5px;
							padding-bottom: 5px;
						}
					}
				}
			}
		}
	}
}