@menuitem-padding-x: 11px;
@menuitem-padding-y: 12px;
@sub-menu-width: 170px;
@menu-height: 41px;

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

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

/* Level 1 */
@menu-level1-bg: @accent-color-8;
@menu-level1-color: @css_submenu_color;
@menu-level1-hover-bg: @menu-level1-bg;
@menu-level1-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;
		list-style: none;
		cursor: pointer;

		&:hover > .sub-menu-wrapper > .sub-menu {
			display: block;
			box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);
			border-radius: 0;
		}

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

			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: 5px;
				z-index: 5;
				width: @home-icon-size;
				height: @home-icon-size;
				content: icon(home3);
				text-indent: 0 !important;
				font-size: @home-icon-size;
				font-family: icomoon;
			}
		}
	}

	// 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;
		background: @menu-level1-bg;
		padding: 0;
		.border-box();

		&.invert-position {
			left: auto;
			right: 0;
		}

		.menu-item {
			padding: 0;

			> a {
				padding: 15px @menuitem-padding-x;
				color: @menu-level1-color;
				font: e(@menu-font-weight) 11px/19px @menu-font-face;
				text-transform: none;
				border-left: 1px solid @accent-color-8;
				transition: all .3s;
			}

			&:last-child {
				padding-bottom: 0;
			}

			&.current-menu-parent,
			&.current-menu-item,
			&.current-menu-ancestor,
			&.current-page-ancestor,
			&:hover {
				background: @css_menu_background;
				transition: all .4s;
				border-radius: 1px;

				> a {
					text-decoration: none;
					color: @menu-level1-hover-color;
					transition: all .3s;
					border-left-color: @accent-color-1;
					border-bottom-color: @accent-color-7;
					padding: 15px 7px 15px 15px;
					transition: all .3s;
				}
			}
		}
	}

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


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

		> a {
			&, &:visited {
				color: @menu-font-color;
				font: e(@menu-font-weight) @menu-font-size/16px @menu-font-face;
			}
		}

		&.current-menu-parent,
		&.current-menu-item,
		&.current-menu-ancestor,
		&.current-page-ancestor,
		&:hover {
			> 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: 4px;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			z-index: 10000;
		}

		// second level
		> .sub-menu-wrapper > .sub-menu {
			left: 0;
			margin: 0 auto auto 0;
			transition: all .3s;

			.menu-item-has-children > a:after {
				position: absolute;
				top: 50%;
				top: calc(50% - 2px);
				right: 10px;
				line-height: 0;
				font-size: 12px;
			}

			// lower levels
			.sub-menu {
				left: 100%;
				top: 10px;

				&.invert-position {
					left: auto;
					right: 100%;
				}
			}
		}
	}
}
