//
// Navbars
// --------------------------------------------------


// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.

.navbar {
  position: relative;
  min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  margin-bottom: @navbar-margin-bottom;
  border: 1px solid transparent;

  // Prevent floats from breaking the navbar 
  &:extend(.clearfix all);

  @media (min-width: @grid-float-breakpoint) {
    border-radius: @navbar-border-radius;
  }
}


// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.

.navbar-header {
  &:extend(.clearfix all);

  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}


// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.

.navbar-collapse {
  overflow-x: visible;
  padding-right: @navbar-padding-horizontal;
  padding-left:  @navbar-padding-horizontal;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  &:extend(.clearfix all);
  -webkit-overflow-scrolling: touch;

  &.in {
    overflow-y: auto;
  }

  @media (min-width: @grid-float-breakpoint) {
    width: auto;
    border-top: 0;
    box-shadow: none;

    &.collapse {
      display: block !important;
      height: auto !important;
      padding-bottom: 0; // Override default setting
      overflow: visible !important;
    }

    &.in {
      overflow-y: visible;
    }

    // Undo the collapse side padding for navbars with containers to ensure
    // alignment of right-aligned contents.
    .navbar-fixed-top &,
    .navbar-static-top &,
    .navbar-fixed-bottom & {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.navbar-fixed-top,
.navbar-fixed-bottom {
  .navbar-collapse {
    max-height: @navbar-collapse-max-height;

    @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
      max-height: 200px;
    }
  }
}


// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.

.container,
.container-fluid {
  > .navbar-header,
  > .navbar-collapse {
    margin-right: -@navbar-padding-horizontal;
    margin-left:  -@navbar-padding-horizontal;

    @media (min-width: @grid-float-breakpoint) {
      margin-right: 0;
      margin-left:  0;
    }
  }
}


//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.

// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
  z-index: @zindex-navbar;
  border-width: 0 0 1px;

  @media (min-width: @grid-float-breakpoint) {
    border-radius: 0;
  }
}

// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: @zindex-navbar-fixed;

  // Undo the rounded corners
  @media (min-width: @grid-float-breakpoint) {
    border-radius: 0;
  }
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0; // override .navbar defaults
  border-width: 1px 0 0;
}


// Brand/project name

.navbar-brand {
  float: left;
  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  font-size: @font-size-large;
  line-height: @line-height-computed;
  height: @navbar-height;

  &:hover,
  &:focus {
    text-decoration: none;
  }

  > img {
    display: block;
  }

  @media (min-width: @grid-float-breakpoint) {
    .navbar > .container &,
    .navbar > .container-fluid & {
      margin-left: -@navbar-padding-horizontal;
    }
  }
}


// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.

.navbar-toggle {
  position: relative;
  float: right;
  margin-right: @navbar-padding-horizontal;
  padding: 9px 10px;
  .navbar-vertical-align(34px);
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;
  border-radius: @border-radius-base;

  // We remove the `outline` here, but later compensate by attaching `:hover`
  // styles to `:focus`.
  &:focus {
    outline: 0;
  }

  // Bars
  .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
  }
  .icon-bar + .icon-bar {
    margin-top: 4px;
  }

  @media (min-width: @grid-float-breakpoint) {
    display: none;
  }
}


// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).

.navbar-nav {
    margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;

    > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: @line-height-computed;
    }

    @media (max-width: @grid-float-breakpoint-max) {
        // Dropdowns get custom display when collapsed
        .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            box-shadow: none;

            > li > a,
            .dropdown-header {
                padding: 5px 15px 5px 25px;
            }

            > li > a {
                line-height: @line-height-computed;

                &:hover,
                &:focus {
                    background-image: none;
                }
            }
        }
    }
    // Uncollapse the nav
    @media (min-width: @grid-float-breakpoint) {
    //    @media (min-width: 50px) {
            float: left;
            margin: 0;

            > li {
                float: left;

                > a {
                    padding-top: @navbar-padding-vertical;
                    padding-bottom: @navbar-padding-vertical;
                }
            }
        }
    }
    // Navbar form
    //
    // Extension of the `.form-inline` with some extra flavor for optimum display in
    // our navbars.
    .navbar-form {
        margin-left: -@navbar-padding-horizontal;
        margin-right: -@navbar-padding-horizontal;
        padding: 10px @navbar-padding-horizontal;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
        .box-shadow(@shadow);
        // Mixin behavior for optimum display
        .form-inline();

        .form-group {
            @media (max-width: @grid-float-breakpoint-max) {
                margin-bottom: 5px;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        // Vertically center in expanded, horizontal navbar
        .navbar-vertical-align(@input-height-base);
        // Undo 100% width for pull classes
        @media (min-width: @grid-float-breakpoint) {
            width: auto;
            border: 0;
            margin-left: 0;
            margin-right: 0;
            padding-top: 0;
            padding-bottom: 0;
            .box-shadow(none);
        }
    }
    // Dropdown menus
    // Menu position and menu carets
    .navbar-nav > li > .dropdown-menu {
        margin-top: 0;
        .border-top-radius(0);
    }
    // Menu position and menu caret support for dropups via extra dropup class
    .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
        margin-bottom: 0;
        .border-top-radius(@navbar-border-radius);
        .border-bottom-radius(0);
    }
    // Buttons in navbars
    //
    // Vertically center a button within a navbar (when *not* in a form).
    .navbar-btn {
        .navbar-vertical-align(@input-height-base);

        &.btn-sm {
            .navbar-vertical-align(@input-height-small);
        }

        &.btn-xs {
            .navbar-vertical-align(22);
        }
    }
    // Text in navbars
    //
    // Add a class to make any element properly align itself vertically within the navbars.
    .navbar-text {
        .navbar-vertical-align(@line-height-computed);

        @media (min-width: @grid-float-breakpoint) {
            float: left;
            margin-left: @navbar-padding-horizontal;
            margin-right: @navbar-padding-horizontal;
        }
    }
    // Component alignment
    //
    // Repurpose the pull utilities as their own navbar utilities to avoid specificity
    // issues with parents and chaining. Only do this when the navbar is uncollapsed
    // though so that navbar contents properly stack and align in mobile.
    //
    // Declared after the navbar components to ensure more specificity on the margins.
    @media (min-width: @grid-float-breakpoint) {
        .navbar-left {
            .pull-left();
        }

        .navbar-right {
            .pull-right();
            margin-right: -@navbar-padding-horizontal;

            ~ .navbar-right {
                margin-right: 0;
            }
        }
    }
    // Alternate navbars
    // --------------------------------------------------
    // Default navbar
    .navbar-default {
        background-color: @navbar-default-bg;
        border-color: @navbar-default-border;

        .navbar-brand {
            color: @navbar-default-brand-color;

            &:hover,
            &:focus {
                color: @navbar-default-brand-hover-color;
                background-color: @navbar-default-brand-hover-bg;
            }
        }

        .navbar-text {
            color: @navbar-default-color;
        }

        .navbar-nav {
            > li > a {
                color: @navbar-default-link-color;

                &:hover,
                &:focus {
                    color: @navbar-default-link-hover-color;
                    background-color: @navbar-default-link-hover-bg;
                }
            }

            > .active > a {
                &,
                &:hover,
                &:focus {
                    color: @navbar-default-link-active-color;
                    background-color: @navbar-default-link-active-bg;
                }
            }

            > .disabled > a {
                &,
                &:hover,
                &:focus {
                    color: @navbar-default-link-disabled-color;
                    background-color: @navbar-default-link-disabled-bg;
                }
            }
        }

        .navbar-toggle {
            border-color: @navbar-default-toggle-border-color;

            &:hover,
            &:focus {
                background-color: @navbar-default-toggle-hover-bg;
            }

            .icon-bar {
                background-color: @navbar-default-toggle-icon-bar-bg;
            }
        }

        .navbar-collapse,
        .navbar-form {
            border-color: @navbar-default-border;
        }
        // Dropdown menu items
        .navbar-nav {
            // Remove background color from open dropdown
            > .open > a {
                &,
                &:hover,
                &:focus {
                    background-color: @navbar-default-link-active-bg;
                    color: @navbar-default-link-active-color;
                }
            }

            @media (max-width: @grid-float-breakpoint-max) {
                // Dropdowns get custom display when collapsed
                .open .dropdown-menu {
                    > li > a {
                        color: @navbar-default-link-color;

                        &:hover,
                        &:focus {
                            color: @navbar-default-link-hover-color;
                            background-color: @navbar-default-link-hover-bg;
                        }
                    }

                    > .active > a {
                        &,
                        &:hover,
                        &:focus {
                            color: @navbar-default-link-active-color;
                            background-color: @navbar-default-link-active-bg;
                        }
                    }

                    > .disabled > a {
                        &,
                        &:hover,
                        &:focus {
                            color: @navbar-default-link-disabled-color;
                            background-color: @navbar-default-link-disabled-bg;
                        }
                    }
                }
            }
        }
        // Links in navbars
        //
        // Add a class to ensure links outside the navbar nav are colored correctly.
        .navbar-link {
            color: @navbar-default-link-color;

            &:hover {
                color: @navbar-default-link-hover-color;
            }
        }

        .btn-link {
            color: @navbar-default-link-color;

            &:hover,
            &:focus {
                color: @navbar-default-link-hover-color;
            }

            &[disabled],
            fieldset[disabled] & {
                &:hover,
                &:focus {
                    color: @navbar-default-link-disabled-color;
                }
            }
        }
    }
    // Inverse navbar
    .navbar-inverse {
        background-color: @navbar-inverse-bg;
        border-color: @navbar-inverse-border;

        .navbar-brand {
            color: @navbar-inverse-brand-color;

            &:hover,
            &:focus {
                color: @navbar-inverse-brand-hover-color;
                background-color: @navbar-inverse-brand-hover-bg;
            }
        }

        .navbar-text {
            color: @navbar-inverse-color;
        }

        .navbar-nav {
            > li > a {
                color: @navbar-inverse-link-color;

                &:hover,
                &:focus {
                    color: @navbar-inverse-link-hover-color;
                    background-color: @navbar-inverse-link-hover-bg;
                }
            }

            > .active > a {
                &,
                &:hover,
                &:focus {
                    color: @navbar-inverse-link-active-color;
                    background-color: @navbar-inverse-link-active-bg;
                }
            }

            > .disabled > a {
                &,
                &:hover,
                &:focus {
                    color: @navbar-inverse-link-disabled-color;
                    background-color: @navbar-inverse-link-disabled-bg;
                }
            }
        }
        // Darken the responsive nav toggle
        .navbar-toggle {
            border-color: @navbar-inverse-toggle-border-color;

            &:hover,
            &:focus {
                background-color: @navbar-inverse-toggle-hover-bg;
            }

            .icon-bar {
                background-color: @navbar-inverse-toggle-icon-bar-bg;
            }
        }

        .navbar-collapse,
        .navbar-form {
            border-color: darken(@navbar-inverse-bg, 7%);
        }
        // Dropdowns
        .navbar-nav {
            > .open > a {
                &,
                &:hover,
                &:focus {
                    background-color: @navbar-inverse-link-active-bg;
                    color: @navbar-inverse-link-active-color;
                }
            }

            @media (max-width: @grid-float-breakpoint-max) {
                // Dropdowns get custom display
                .open .dropdown-menu {
                    > .dropdown-header {
                        border-color: @navbar-inverse-border;
                    }

                    .divider {
                        background-color: @navbar-inverse-border;
                    }

                    > li > a {
                        color: @navbar-inverse-link-color;

                        &:hover,
                        &:focus {
                            color: @navbar-inverse-link-hover-color;
                            background-color: @navbar-inverse-link-hover-bg;
                        }
                    }

                    > .active > a {
                        &,
                        &:hover,
                        &:focus {
                            color: @navbar-inverse-link-active-color;
                            background-color: @navbar-inverse-link-active-bg;
                        }
                    }

                    > .disabled > a {
                        &,
                        &:hover,
                        &:focus {
                            color: @navbar-inverse-link-disabled-color;
                            background-color: @navbar-inverse-link-disabled-bg;
                        }
                    }
                }
            }
        }

        .navbar-link {
            color: @navbar-inverse-link-color;

            &:hover {
                color: @navbar-inverse-link-hover-color;
            }
        }

        .btn-link {
            color: @navbar-inverse-link-color;

            &:hover,
            &:focus {
                color: @navbar-inverse-link-hover-color;
            }

            &[disabled],
            fieldset[disabled] & {
                &:hover,
                &:focus {
                    color: @navbar-inverse-link-disabled-color;
                }
            }
        }
    }