//
// _navigation
//
//
// ********************************************************************************************************************************

// Variables
$ui-bar-width: 20px;
$ui-bar-height: 4px;
$ui-bar-color: #000;
$ui-bar-radius: 2px;
$ui-nav-item-background: map-get($ui-colors, primary);
$ui-nav-item-background-hover: map-get($ui-colors, secondary);

// Extends
%bar {
    display:inline-block;
    width: $ui-bar-width;
    height: $ui-bar-height;
    background-color: $ui-bar-color;
    border-radius: $ui-bar-radius;
}


.#{$namespace}navigation {
 	> ul {
		@extend %bulletless;
		display:flex;
		flex-wrap:wrap;
		margin:0;
 	 	> li {
			a {
				display:block;
				padding:10px;
				color:#fff;
				background:$ui-nav-item-background;
				text-decoration:none;
			}
		}
		@include media-breakpoint-down($ui-mobile-nav-breakpoint) {
			display:block;
			> li {
				display:block;
			}
		}
 	}
	
	@include media-breakpoint-down($ui-mobile-nav-breakpoint) {
		position:absolute;
		top:40px;
		width:50%;
		height:100%;
		left:-150%;
		transition:left 0.5s ease-in-out;
		background:$ui-nav-item-background;
		z-index:3;
		
		&.is-active {
			left:0;
		}
	}
}

.#{$namespace}toggle-navigation {
	display: none;
	
	width: 40px;
	height: 40px;
	padding: 5px !important;
	background: none;
	
	&:before, &:after {
		display: none !important;
	}
	
	span {
		position: relative;
		@extend %bar;
		transition: all 0.5s ease-in-out;
		
		&:before, &:after {
			position: absolute;
			left: 0;
			content: '';
			@extend %bar;
			transition: all 0.5s ease-in-out;
			transform-origin: center center;
		}
		&:before {
			top: -6px;
		}
		&:after {
			top: 6px;
		}
	}
	&.is-active {
		span {
			background-color: transparent;
			top: 0;
			&:before {
				top: 0;
				transform: rotate(-45deg);
			}
			&:after {
				top: 0;
				transform: rotate(45deg);
			}
		}
	}
	
	@include media-breakpoint-down($ui-mobile-nav-breakpoint) {
		display: block;
	}
}