.menu,
.menu ul {
	@include list-normalize;
}

.menu {
	display: flex;
	flex-wrap: wrap;
	margin-top: -10px;
	margin-left: calc(var(--menuItemsSpacing) / -2);
	margin-right: calc(var(--menuItemsSpacing) / -2);

	// first level
	> li {
		line-height: 1.3;
		margin-top: 10px;
		margin-left: calc(var(--menuItemsSpacing) / 2);
		margin-right: calc(var(--menuItemsSpacing) / 2);

		a {
			display: flex;
			align-items: center;
			text-align: initial;
		}
	}


	// sub menu
	.menu-item-has-children {
		position: relative;

		&:hover {
			> .sub-menu {
				opacity: 1;
				visibility: visible;
				transform: translate3d(0, 0, 0);
			}
		}
	}

	.sub-menu {
		$submenu-top: 15px;

		position: absolute;
		z-index: 10;
		left: -20px;
		width: var(--dropdownMenuWidth);
		min-width: 100px;
		// padding: 5px 0;
		margin-top: $submenu-top;
		border-radius: 2px;

		opacity: 0;
		visibility: hidden;
		transform: translate3d(0, 10px, 0);
		transition: opacity 0.2s ease,
					visibility 0.2s ease,
					transform 0.2s ease;

		li {
			a {
				padding: 13px 20px;
			}
		}

		// bridge
		&:before {
			position: absolute;
			content: '';
			width: 100%;
			height: $submenu-top;
			top: -#{$submenu-top};
			left: 0;
		}
	}

	// edit shortcute position fix
	> .customize-partial-edit-shortcut {
		margin-left: calc(var(--menuItemsSpacing) / 2);
	}
}

@import 'primary-menu';
@import 'footer-menu';
@import 'mobile-menu';
@import 'menu-arrow';