/* FILE: main/menu/_primary-sub.scss */

//
// Sub-menus
//





.main-navigation li ul {
	position: absolute;
	visibility: hidden;
	min-width: 12em;
	#{$left}: -1.62em; // {{RTL}}
	top: 138%;
	padding: 0 0 .38em;
	margin: 0;
	text-transform: none;
	opacity: 0;
	z-index: 99;
	border-radius: 0 0 .38em .38em;
	box-shadow: 0 5px 20px 0 rgba( #000, .4 );
	transition: all .4s ease-in-out;
}



@include responsive( map_get( $breakpoint, 'l' ), 'max-width' ) {

	.main-navigation li ul,
	.main-navigation li li ul,
	.main-navigation li:hover > ul,
	.main-navigation li li:hover > ul {
		position: relative;
		visibility: visible;
		#{$left}: auto; // {{RTL}}
		top: auto;
		padding: 0;
		border-radius: 0;
		opacity: 1;
		box-shadow: none;
	}

	.main-navigation li ul {
		margin-bottom: -1px;
	}

}



.main-navigation li:hover > ul,
.main-navigation li.focus > ul {
	visibility: visible;
	top: 100%;
	opacity: 1;
}



.main-navigation li li {
	float: none;
	display: block;
	margin: -1px 0 0;
	line-height: 1.62;
	white-space: normal;
	border-top-width: 1px;
	border-top-style: solid;

	@include responsive( map_get( $breakpoint, 'l' ), 'max-width' ) {

		&:last-child {
			border-bottom-width: 1px;
			border-bottom-style: solid;
		}

	}

	@include responsive( map_get( $breakpoint, 'l' ) ) {
		margin: 0;
		white-space: nowrap;
	}

	&,
	a {
		transition: all .2s ease-in-out;
	}

	&:first-child {

		@include responsive( map_get( $breakpoint, 'l' ) ) {
			border-width: 0;
		}

	}

	> a {
		display: block;
		padding: .62em;
		padding-#{$left}: 1.62em; // {{RTL}}
		color: inherit;

		@include responsive( map_get( $breakpoint, 'l' ) ) {
			padding: .62em 1.62em;
		}

	}

}