//
// main navigation
//
 
$arrow-bdr-size: 0.5rem;
$arrow-color: #efefef;

@mixin nav-focus {
	&:hover,
	&.hover,
	&:focus,
	&.focus {
		@content;
	}
}

//main navigation/desktop
@media (min-width: 64.0625rem) {

	.main-nav {
		display: inline-block;
		position: relative;
		z-index: 2000;


		//reset table
		ul {
			overflow: visible;
			padding: 0;
			margin: 0;
			list-style: none;

			li {
				display: flex;
				width: 100%;
				align-items: center;
				list-style: inherit;
				position: relative;
				text-align: left;
				background: #fff;
				margin: 0;

				> a, 
				> strong {
					display: block;
					padding: 1ex;
					width: 100%;
					text-decoration: none;
					position: relative;
					&:focus {
						z-index: 10;
					}
				}

				&.menu__has-ul {
					 &:after {
						content: ' ';
						display: block;
						height: $arrow-bdr-size;
						width:$arrow-bdr-size;
						margin-left: 1rem;
						margin-top: -#{floor($arrow-bdr-size * 0.5)};
						color: $arrow-color;
						border-top: $arrow-bdr-size solid;
						border-left: $arrow-bdr-size solid transparent;
						border-right: $arrow-bdr-size solid transparent;
						transition: 200ms all ease-out;
					}

					@include nav-focus {
						&:after {
							transform: rotateX(-180deg);
						}
					}
				}

				//2nd level List
				ul {
					position: absolute;
					box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
					top: -300vh;
					left: -300vw;
					min-width: 14rem;
					visibility: hidden;

					li {
						text-align: left;
						background: #fff;

						> a:hover,
						> a:focus {
							background-color: #efefef;
						}
					}

				}

				@include nav-focus {
					> ul {
						visibility: visible;
						display: inline-block;
						left: 50%;
						top: 100%;
						padding: 0;
						transform: translateX(-50%);
						z-index: 10;
						
						li {
							@include nav-focus {
								> ul {
									transform: translateX(0%);
									left: 100%;
									right: auto;
									top: 0;
								}
							}

							//if we're on the edge position it to the left of it
							&.menu__on-edge {
								@include nav-focus {
									> ul {
										left: auto;
										right: 100%;
									}
								}
							}
						}
					}
				}
			}
		}
		//first level override
		> ul {
			display: inline-flex;
			align-items: flex-end;
			justify-content: flex-end;
			flex-wrap: nowrap;
			width: 100%;

			> li {
				margin-left: 1rem;
				margin-right: 1rem;

				&:first-child { margin-left: 0;}
				&:last-child { margin-right: 0;}
			}

			li.menu__on-edge {
				> ul {
					transform: translateX(0%);
					right: 0;
					left: auto;
				}
			}
		}
	}
	.menu__btn-tg {
		display: none;
	}
}