//
//Mobile Navigation
//


$ul-level-1-bg: #606060;
$ul-level-2-bg: #555;
$ul-level-3-bg: #444;
 
$button-hamburger-color: #555;
$max-width-menu: 48rem;
$arrow-bdr-size: 0.5rem;
$arrow-color: #efefef;

.mobile-nav-btn,
.btn-nav--mb-submenu,
.btn-nav--mb-back,
.btn-nav--mb-next {display: none;}

@media (max-width: 64rem) {

	.mobile-nav-btn {
		position: relative;	 
		display: block;
		height: 2rem;
		width: 2rem;
		padding: 0;
		transition: all 120ms;
 
		&.menu--active {
			border-color: #00806f;
			background-color: #00bfa5;
			box-shadow: inset 0 1px 0 rgba(#fff, 0.3);
		}

		&:before,
		&:after,
		> span {
			content: ' ';
			display: block;
			background: $button-hamburger-color;
			height: 0.125rem;
			width: 100%;
			transition: all 180ms cubic-bezier(0.04, 0.55, 0.47, 1);
		}

		> span {
			margin: 0.5rem 0;
		}
	}

	//
	//btn opened state
	//
	 
	.mobile-nav-btn[aria-expanded="true"] {
			
		&:before {
			transform: rotate(45deg);
			position: absolute;
			left: 0;
			top: 50%;
			margin: 0;
		}

		> span {
			opacity: 0;
			display: none;
		}

		&:after {
			transform: rotate(-45deg);
			position: absolute;
			left: 0;
			top: 50%;
			margin: 0;
		}
	}
	 

	.main-nav {
		width: 100%;

		ul {
			height: 0;
			transition: height 300ms ease-in-out;
			overflow: hidden;
			visibility: hidden;
			font-family: inherit;
			width: 100%;
			padding: 0;
			margin: 0;

			a, button {
				visibility: hidden;
			}

			a {
				outline-offset: -calc();
			}
		}
		//first level <ul>
		> ul {
			width: 100%;
			height: auto;
			position: absolute;
			visibility: visible;
			width: 100%;
			top: 100%;
			left: -300vw;
			right: 0;
			z-index: 1000;
			opacity: 0;
			transition: opacity 200ms ease-in-out;
			
		 
			> li {
				color: #fff;
				line-height: 1.1;
			}
		}
		
		&.menu--starting,
		&.menu--active {
			> ul {
				> li > a, 
				> li > button {
					visibility: visible;
					display: inline-block;
				}
			}
		}

		ul.menu--toggling,
		ul.menu--active {
			> li > a, 
			> li > button {
				visibility: visible; 
				display: inline-block;
			}
		}

		li {
			position: relative;
			padding: 0;
			margin:0;
			display: block;

			a {
				color: inherit;
				padding: 1rem 1.5rem;
				font-size: 1.125rem;
				text-decoration: none;
			}
			+ li {
				border-top: 0.0625rem solid #464748;
			}

			li + li {
				border-top-color: rgba(#fff, 0.1);
			}

			li {
				font-size: .875rem;
			}
		}

		ul {
			background: $ul-level-1-bg;
			ul {
				background: $ul-level-2-bg;
				ul {
					background: $ul-level-3-bg;
				}
			}
		}
		

		//
		// For the an alternate view
		//
		li .nav-icon {
			display: none;
		}

		.hide-nav-elem {
			display: none;
		}
		
		.show-nav-elem {

			> ul {
				display: block;
				height: auto;
				visibility: visible;
			}

			> .btn-nav--mb-back {
				display: none;
				background: none;
				display: inline-block;
				padding: .25rem;
				margin-left: .875rem;
				color: #fff;
				text-align: center;
				cursor: pointer;
			}
		}

		//-------

		&.menu--starting,
		&.menu--active {
			> ul {
				opacity: 1;
				top: 100%;
				left: auto;
				padding: 0;
				margin: 0;
				z-index: 1001;
			}
		}

		.menu--active,
		.menu--toggling {
			height: auto;
			visibility: visible;
		}

        .menu__btn-tg {
            padding: 0.75rem;
            background: transparent;
            border:none;
            position: absolute;
            right: 1rem;
            top: .75rem;
            display: block;
            color: inherit;

            &:after {
                content:' ';
                display: block;
                padding:0;
                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;
            }
        }

        &.menu--open {
            > .menu__btn-tg {
                &:after {
                    transform: rotateX(-180deg);
                }
            }
        }
	}
}