// ---------- #MAIN MENU

%dropdown-arrow {
	position: relative;

	&:after {
		content: "";
		position: absolute;
		top: rem(32px);
		right: rem(22px);
		border: 0 solid transparent;
		border-width: rem(4px) rem(3px);
		border-top-color: currentColor;
	}
}

%sub-menu {
	@extend .nav;
	@extend .nav--stacked;
	text-align: left;
	display: none;

	@include query-above($lap) {
		min-width: rem(240px);
		position: absolute;
		top: 100%;
		left: 0;

		& & {
			top: -1px;
			left: 100%;
		}
	}

	@include query-above($lap) {
		.nav--main > li > & {
			left: 50%;
			transform: translateX(-50%);
		}
	}

	a {
		display: block;

		@include query-above($lap) {
			padding: rhythm(4/9) rhythm(2/3);
		}
	}
}

%menu-item {
	position: relative;
	text-align: left;

	&:hover > ul {
		display: block;
	}
}

.main-navigation {
	margin-bottom: rhythm(1);

	.site-title {
		display: block;
		margin-left: rem($gutter-desk);
		margin-right: rem($gutter-desk);

		@include query-above($lap) {
			display: none;
		}
	}
}

%sub-menu-transition-out {
	@include query-above($lap) {
		opacity: 0;
		transition: opacity .2s ease-out, visibility 0s .3s linear, left 0s .3s linear;
		pointer-events: none;
		left: 0;
		// left: 9999em;
	}
}

%sub-menu-transition-in {
	@include query-above($lap) {
		opacity: 1;
		transition: opacity .2s ease-in;
		pointer-events: auto;
		// left: 100%;
	}
}

.sub-menu-wrapper {
	@extend .clearfix;
	@extend %sub-menu-transition-out;

	@include query-above($lap) {
		position: absolute;
		top: 100%;
	}

	background: white;
	// white-space: nowrap;

	> * {
		// white-space: normal;
		// vertical-align: top;
	}

	.hover & {
		@extend %sub-menu-transition-in;
		left: 0;
		visibility: visible;
	}

	&:empty {
		display: none !important;
	}

	.menu-item-has-children {
		position: relative;
	}

	.sub-menu {
		@extend %sub-menu-transition-out;

		background: white;

		margin-top: rhythm(-1/2);

		@include query-above($lap) {
			position: absolute;
			top: -1px;
			padding: rhythm(1/2) rhythm(1);
		}

		@include query-above($lap) {
			border: 1px solid $borders;
		}
	}

	> .sub-menu {
		position: static;
		display: inline-block;
		margin-top: 0;
		pointer-events: none;

	}

	.hover & .sub-menu {
		pointer-events: auto;
	}

	> .sub-menu,
	> .sub-menu .hover > .sub-menu {
		@extend %sub-menu-transition-in;
	}
}

@import "nav/nav--main";
@import "nav/nav--social";
@import "nav/nav--toolbar";