//////////////////////////////////////////
// MEGALODON BASE STYLES
//////////////////////////////////////////

.main-nav{
	width: $nav-width;
	@include clearfix;

	@include break(tl){
		display: none;
	} 
}

.megalodon{
	height: $nav-height;
	position: relative;
	z-index: 201;
	background-color: $nav-color;
	@include flex;

	> li{
		line-height: $nav-height;
		width: percentage(1/$navigation-count);

		@if $nav-link-borders{

			&:first-child a{
				border-left: 0;
			}

			&:last-child a{
				border-right: 0;
			}
		}

		&:hover > a {
			background-color: $nav-hover-background;
			color: $nav-link-hover-color;
			position: relative;
		}
	}

	a {
		color: $nav-link-color;
		display: block;
		height: $nav-height;
		line-height: $nav-height;
		text-align: center;
		text-decoration: none;
		font-weight: 400;
		@include transition(background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease);
		
		@if $nav-link-borders{
			border-left: solid $nav-border-left-color;
			border-right: solid $nav-border-right-color;
			border-width: $nav-link-border-width;
		}
	}

	.menu { 
		position: absolute;
		z-index: 201;
		top: -999rem;
		left: -999rem;
		width: $menu-width;
		text-indent: 0;
		background-color: $menu-color;
		overflow: hidden;
		font-weight: 400;
		opacity: 0;
		@include flex;

		@if $menu-box-shadow{
			box-shadow: $menu-box-shadow-value;
		}

		nav{
			padding: $menu-padding;

			@if $menu-columns{
				width: percentage(1/$menu-column-number);
			} @else {
				width: 100%;
			}
		}

		li { 
			display: block;
			padding: $menu-link-spacing 0;
			height: auto;
			width: auto;
			font-size: em($menu-font-size, $em-base);
			line-height: $menu-line-height;
			background-color: transparent;

			@include pointer(pointer){
				background-color: transparent;
			}
		}

		a{
			background-color: transparent;
			width: auto;
			text-align: left;
			color: $menu-link-color;
			font-weight: 400;
			height: auto;
			line-height: $menu-line-height;
			background-image: none;
			border: 0;
			padding: 0;
			display: inline-block;
			text-transform: none;
			text-shadow: none;
			@include transition(color 0.25s ease);

			&:hover{
				color: $menu-link-hover-color;
			}
		}

		ul ul{
			padding-left: $menu-sub-indent;
			font-size: em($menu-sub-font-size, $menu-font-size);

			li{
				font-size: 1rem;
			}

			a{
				font-weight: 300;
			}
		}
	}
}

//////////////////////////////////////////
// STUFF THAT MAKES IT WORK
//////////////////////////////////////////

.megalodon{

	li{

		&:hover{

			.menu{
				// zoom: 1;
				left: auto;
				top: auto;
				opacity: 1;
				@include transition(opacity 0.25s ease);
			}
		}

		&.nav-6{

			&:hover{

				.menu{
					// zoom: 1;
					left: auto;
					top: auto;
					right: 0;
				}
			}
		}
	}
}