// some changes to twbs navbar

// Basics of a navbar
// $navbar-height-xs:                 30px !default;
// $navbar-height-sm:                 40px !default;
// $navbar-height:                    50px !default;
// $navbar-height-lg:                 60px !default;
// $navbar-height-xl:                 80px !default;
// 
// $subnav-height:                    50px !default;
// $subnav-background:                #069 !default;
// $subnav-color:                     #fff !default;
// 
// $navbar-margin-bottom:             $line-height-computed !default;
// $navbar-border-radius:             $border-radius-base !default;
// $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
// $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
// $navbar-collapse-max-height:       340px !default;

/*
.navbar
	.header
		.navbar-brand
	.navbar-collapse
		.nav.navbar-nav.navbar-left
			li a
		.nav.navbar-nav.navbar-right
			li a

*/
.navbar {
	
	// .navbar-nav {
	// 	a:not(.btn) {
	// 		
	// 	}
	// }
	// 
	// // default hight 50px
	// a.btn {
	// 	@include vertical-padding( $navbar-padding-vertical / 2 - 1 );
	// 	@include vertical-margin( $navbar-padding-vertical / 2 );
	// }
	
}



.navbar {
	background: $white;
	border-color: $main-border-color;
	
	.corset, .container { background: inherit; }
	.navbar-collapse { background: inherit; }
	
	// // default hight 50px
	// .navbar-nav {
	// 	background: inherit;
	// 	// a:not(.btn) { }
	// 	& > li > a, & > a {
	// 		padding: 15px 10px;
	// 		line-height: 20px;
	// 		
	// 		&.btn {
	// 			margin: 9px 5px;
	// 			@include vertical-padding( 5px );
	// 			line-height: 20px;
	// 			&.btn-sm {
	// 				margin: 11px 5px;
	// 				@include vertical-padding( 3px );
	// 			}
	// 			&.btn-xs {
	// 				margin: 13px 5px;
	// 				@include vertical-padding( 1px );
	// 			}
	// 			&.btn-lg {
	// 				margin: 6px 5px;
	// 				@include vertical-padding( 8px );
	// 			}
	// 		}
	// 	}
	// 	
	// }
	
	@include sized-navbar( $navbar-height );
	
	@media (max-width: $grid-float-breakpoint-max) {
		.corset .navbar-collapse { @include horizontal-margin( -10px ); }
	}
	
	&.navbar-xs { @include sized-navbar( $navbar-height-xs ); }
	&.navbar-sm { @include sized-navbar( $navbar-height-sm ); }
	&.navbar-lg { @include sized-navbar( $navbar-height-lg ); }
	&.navbar-xl { @include sized-navbar( $navbar-height-xl ); }
	
}

.navbar.navbar-fixed-top { margin: 0; }





body, #body, #container, .main-content, .main_content {
	
	&.fixed-nav-xs { padding-top: $navbar-height-xs; }
	&.fixed-nav-sm { padding-top: $navbar-height-sm; }
	&.fixed-nav    { padding-top: $navbar-height; }
	&.fixed-nav-lg { padding-top: $navbar-height-lg; }
	&.fixed-nav-xl { padding-top: $navbar-height-xl; }
	
}




@media (max-width: $grid-float-breakpoint) {
	.navbar {
		&.navbar-slidebar {
			.navbar-collapse {
				display: block; position: fixed;
				top: 0; right: auto; bottom: 0; left: 0;
				margin: 0;
				background: $dark-bg;
				// @include transform( translateZ( 0 ) );
				// @include transform( translateX( -222px ) ); 
				@include transform( translate(-222px,0) );
				width: 220px;
				max-height: none;
				overflow-y: scroll;
				@include transition (all 0.7s ease-in-out);
				.btn { @include horizontal-margin( 15px ); width: auto; }
				&.on { 
				    // @include transform( translateX( 0 ) );
				    @include transform( translate(0,0) );
				}
			}
			
			&.fixed-top, &.navbar-fixed-top {
				.navbar-collapse { top: $navbar-height; }
				&.navbar-xs { .navbar-collapse { top: $navbar-height-xs; } }
				&.navbar-sm { .navbar-collapse { top: $navbar-height-sm; } }
				&.navbar-lg { .navbar-collapse { top: $navbar-height-lg; } }
				&.navbar-xl { .navbar-collapse { top: $navbar-height-xl; } }
			}
		}
	}
}

.navbar-sub-nav {
    display: block;
    float: none;
}


@mixin calculate_subnav_position( $that-header-height: 50px ) {
    &.fixed-sub-nav { padding-top: $subnav-height + $that-header-height; }
	.navbar-sub-nav { top: $that-header-height; }
}

@include responsiveStep-sm {
    
    .navbar-bordered {
        & > .navbar-nav.navbar-left, & > .navbar-nav.navbar-right {
            & > li + & > li {
                border-left: solid 1px $main-border-color;
            }
        }
    }
    .navbar-header + .navbar-collapse {
        &.navbar-bordered, .navbar-bordered {
            & > .nav.navbar-nav.navbar-left > li { border-left: solid 1px $main-border-color; }
        }
    }
    
    .navbar-sub-nav {
        $padHorizontal: floor(($subnav-height - $line-height-computed) / 2);
        $lineHeight: $subnav-height - $padHorizontal * 2;
        
        display: block; position: relative;
        margin: 0; padding: 0;
        
        height:     $subnav-height;
        min-height: $subnav-height;
        
        & > .corset { height: $subnav-height; }
        
        position: fixed;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 1px;
        
        background: $subnav-background;
        
        
        
        
        // a:not(.btn) { }
        
        
        &, & > .nav.navbar-nav, & > .corset > .nav.navbar-nav, & > .container > .nav.navbar-nav {
            list-style: none;
            
            &, & > li, & > li > a { color: $subnav-color; }
            & > li > a:hover { color: $subnav-hover-color; }
            & > li > a:active { color: $subnav-active-color; }
            & > li {
                float: left;
                position: relative;
                display: block;
            }
            
            & > .open > a {
                background: darken($subnav-background, 5%);
                color: #fff;
            }
            
            & > li > a, & > a  {
                
                display: block; position: relative;
    			padding: $padHorizontal $navbar-padding-horizontal;
    			line-height: $lineHeight;
			
    			&.btn {
    				@if ($lineHeight + 10) > ($subnav-height - 5) {
    					margin: 4px 5px;
    					@include vertical-padding( $padHorizontal - 5px );
    					line-height: $lineHeight;
    				} @else {
    					margin: #{$padHorizontal - 6px} 5px;
    					@include vertical-padding( 5px );
    					line-height: $lineHeight;
					
    					@if ($lineHeight + 16) < ($subnav-height - 5) {
    						&.btn-lg {
    							margin: #{$padHorizontal - 9px} 5px;
    							@include vertical-padding( 8px );
    						}
    					}
					
    					&.btn-sm {
    						margin: #{$padHorizontal - 4px} 5px;
    						@include vertical-padding( 3px );
    					}
    					&.btn-xs {
    						margin: #{$padHorizontal - 2px} 5px;
    						@include vertical-padding( 1px );
    					}
					
    				}
    			}
    		}
        }
        
    		
        
    }
    
	body, #body, #container, .main-content, .main_content {
	    
	    &.fixed-nav-xs { @include calculate_subnav_position( $navbar-height-xs ); }
    	&.fixed-nav-sm { @include calculate_subnav_position( $navbar-height-sm ); }
    	&.fixed-nav    { @include calculate_subnav_position( $navbar-height ); }
    	&.fixed-nav-lg { @include calculate_subnav_position( $navbar-height-lg ); }
    	&.fixed-nav-xl { @include calculate_subnav_position( $navbar-height-xl ); }
	    
    }
    
    // .corset .navbar-sub-nav { @include horizontal-padding( 5% ); }
    
    .navbar.navbar-fixed-top {
        .navbar-collapse {
            .nav.navbar-nav.navbar-left { margin-left: -15px; }
            .nav.navbar-nav.navbar-right { margin-right: -15px; }
        }
        .navbar-header { margin-left: -15px; }
        .navbar-header + .navbar-collapse > .nav.navbar-nav.navbar-left { margin-left: 0; }
    }
    
}

@include responsiveStep-xs-only {
    .navbar-sub-nav > .corset, .navbar-sub-nav > .container { width: auto !important; padding: 0 !important; margin: 0 !important; }
}

// @include responsiveStep-lg {
//     // .corset .navbar-sub-nav { @include horizontal-padding( 10% ); }
// }