/*------------------------------------*\
    #NAVIGATION
\*------------------------------------*/

.c-nav {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 4.7em);
	background: $color-gray-2;
	position: absolute;
	overflow: auto;
	z-index: 1;
	
	/**
	 * Navigation Active State
	 * 1) Triggered when Menu Button is clicked
 	 */
	&--is-active {
		top: 4.7em;
		left: 0;
		width: 12em;

		@media all and (min-width: $bp-small) {
			top: 0;
			width: initial;
		}
	}

	@media all and (min-width: $bp-small) {
        border-top: 1px dotted $color-gray-13;
        position: relative;
		width: 12em;
		order: 1;
	}
}

/**
 * Navigation Trigger Button
 */
.c-nav__trigger {
	display: block;
	position: absolute;
    top: 0.85rem;
    left: 2em;
    color: $color-gray-50;
    border: 1px dotted $color-gray-50;
    background: transparent;
	border-radius: $border-radius;
	padding: 0.8em 0.5em;
	text-transform: uppercase;
    font-weight: bold;
    transition: all $anim-fast ease;
    
    &--is-active {
	    color: $color-gray-63;
    }
    
    &:hover, &:focus {
	    color: $color-gray-63;
    }

	@media all and (min-width: $bp-small) {
		display: none;
	}
}

/**
 * Nav List
 * 1) This is the primary navigation list
 */
.c-nav__list {
	display: none;
	background: $color-gray-2;

    /**
     * Nav list styling when parent nav is active
     */
	.c-nav--is-active & {
		display: block;
		top: 48px;
		left: 0;

		@media all and (min-width: $bp-small) {
			top: 0;
		}
	}

	@media all and (min-width: $bp-small) {
		display: block;
		padding: 0;
	}
}

/**
 * Nav Sublist
 */
 
.c-nav__sublist {
	display: none;
 
	&--has-children {
		display: block;
		max-height: 0px;
		overflow: hidden;
		background: $color-gray-3;
		box-shadow: 0 22px 11px -22px $color-gray-13 inset,
		            0 -22px 11px -22px $color-gray-13 inset;
		transition: all $anim-fast ease-out;
	
	    /**
	     * Nav Sublist styling when parent nav item is active
	     */
		.c-nav__item--has-children--is-active & {
			max-height: 800px;
	        padding: 0.3rem 0;
	        transition-timing-function: ease-in;
		}
		
	} 
}

/**
 * Nav list item
 */
.c-nav__item {
	border-bottom: 1px dotted $color-gray-13;
	background: $color-gray-2;
	position: relative;
	
	&--has-children {
		
		&:after {
		    content: "";
		    position: absolute;
		    top: 26px;
		    right: 10px;
		    display: block;
		    width: 0;
		    height: 0;
		    margin-left: -4px;
		    pointer-events: none;
		    border-top: 7px solid $color-gray-27;
		    border-right: 5px solid transparent;
		    border-left: 5px solid transparent;
	    }
	    
	    &--is-active {
		    
		    &:after {
			    transform: rotate(180deg);
			}
	    }
	}
}

/**
 * Nav link
 */
.c-nav__link {
	display: flex;
	padding: 1em;
	
	&--is-active {
		color: $color-brand;
	}

	.c-nav__sublist__item & {
		display: block;
		padding: 0.5em 1em;
	}
}

/**
 * Nav link
 * 1) Link that uses JavaScript
 */
.js-nav__link {
	position: relative;
}

/**
 * Secondary Nav
 * 1) The secondary nav is a unordered list that contains secondary
 * links such as "About" and "Updates"
 */
.c-secondary-nav {
	margin-top: auto;
    display: none;

    /**
     * Secondary nav styling when parent nav is active
     */
	.c-nav--is-active & {
		display: block;
	}

	@media all and (min-width: $bp-small) {
		display: block;
	}
}
