//
// Navbar
// --------------------------------------------------

.navbar {
  position: relative;
  min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  border: 1px solid transparent;
  padding-left: $grid-unit-x * 3;
  padding-right: $grid-unit-x * 3;

  // Prevent floats from breaking the navbar
  @include clearfix;

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

    .navbar-left {
      float: left !important;
    }
    .navbar-right {
      float: right !important;
      margin-right: -$navbar-padding-horizontal;

      ~ .navbar-right {
        margin-right: 0;
      }
    }
  }

  &-header {
    @include clearfix;

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

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

    // Undo the rounded corners
    @media (min-width: $grid-float-breakpoint) {
      border-radius: 0;
    }
  }

  &-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }

  &-fixed-bottom {
    bottom: 0;
    margin-bottom: 0;
    border-width: 1px 0 0;

    .navbar-nav > li > .dropdown-menu {
      margin-bottom: 0;
      @include border-top-radius($navbar-border-radius);
      @include border-bottom-radius(0);
    }
  }

  &-static-top {
    z-index: $zindex-navbar;
    border-width: 0 0 1px;

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

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

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

    > img {
      display: block;
    }

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

  &-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-right: $navbar-padding-horizontal;
    @include 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 {
    margin: ($navbar-padding-vertical * 0.5) (-$navbar-padding-horizontal) 0;

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

      > .dropdown-menu {
        margin-top: 0;

        @include border-top-radius($dropdown-border-radius);
      }
    }

    @media (max-width: $grid-float-breakpoint-max) {
      .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) {
      float: left;
      margin: 0;

      > li {
        float: left;

        > a {
          padding-top: $navbar-padding-vertical;
          padding-bottom: $navbar-padding-vertical;
        }
      }
    }
  }

  &-form {
    padding: 10px $navbar-padding-horizontal;
    margin-right: -$navbar-padding-horizontal;
    margin-left: -$navbar-padding-horizontal;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;

    // Mixin behavior for optimum display
    @include 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
    @include navbar-vertical-align($input-height-base);

    // Undo 100% width for pull classes
    @media (min-width: $grid-float-breakpoint) {
      width: auto;
      padding-top: 0;
      padding-bottom: 0;
      margin-right: 0;
      margin-left: 0;
      border: 0;
    }
  }

  &-right {
    margin-right: 0;
  }

  &-btn {
    @include navbar-vertical-align($input-height-base);

    &.btn-sm {
      @include navbar-vertical-align($grid-unit-y * 4);
    }

    &.text-primary {
      @include navbar-vertical-align($grid-unit-y * 3);
    }
  }

  &-text {
    @include navbar-vertical-align($line-height-computed);

    @media (min-width: $grid-float-breakpoint) {
      float: left;
      margin-right: $navbar-padding-horizontal;
      margin-left: $navbar-padding-horizontal;
    }
  }

  // Style variations
  // ----------------------

  &-default {
    background-color: $navbar-default-bg;
    border-width: 0;

    @include media-breakpoint-down(md) {
      min-height: $navbar-height-mobile;
    }

    .navbar-text {
      @include themes(color, navbar-default-color);
    }

    .navbar-brand {
      padding-left: 0;

      @include themes(color, navbar-default-brand-color);

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

    .navbar-header {
      width: 100%;
      display: flex;
      align-items: center;
      min-height: $navbar-height;

      @include media-breakpoint-down(md) {
        min-height: $navbar-height-mobile;
      }

      &-right {
        margin-left: auto;
        display: flex;
        align-items: center;

        @include media-breakpoint-down(md) {
          margin-right: auto;
        }
      }
    }

    .navbar-badge {
      @include themes(color, navbar-default-badge-color);
      @include themes(background-color, navbar-default-badge-bg);
    }

    .navbar-nav {
      @media (max-width: $grid-float-breakpoint-max) {
        .open .dropdown-menu {
          > li > a {
            @include themes(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 {
              @include themes(color, navbar-default-link-disabled-color);
            }
          }
        }
      }

      > li {
        > a {
          line-height: $navbar-default-line-height;
          font-weight: $font-weight-bold;
          font-size: $font-size-base;
          padding-top: 0;
          padding-bottom: 0;

          @include themes(color, navbar-default-link-color);

          @include navbar-vertical-align($navbar-default-line-height);

          &:hover,
          &:focus {
            color: $brand-primary;
            background-color: $navbar-default-link-hover-bg;
          }

          .avatar {
            height: $navbar-default-line-height;
            width: $navbar-default-line-height;
            line-height: $navbar-default-line-height;
          }
        }

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

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

            @include themes(color, navbar-default-link-disabled-color);
          }
        }

        &.open {
          > a {
            &,
            &:hover,
            &:focus {
              background-color: transparent;
              color: $brand-primary;
            }
          }
        }
      }
    }

    .navbar-collapse {
      padding-left: 0;
      padding-right: 0;
      margin-left: -$grid-unit-x;
      margin-right: -$grid-unit-x;
    }

    .navbar-form {
      padding-left: 0;
      padding-right: 0;
    }

    .navbar-right:not(:last-child) {
      margin-right: $grid-unit-x;
    }

    .navbar-left:not(:first-child) {
      margin-left: $grid-unit-x;
    }

    .navbar-toggle {
      @include themes(border-color, navbar-default-toggle-border-color);

      &:hover,
      &:focus {
        @include themes(background-color, navbar-default-toggle-hover-bg);
      }
      .icon-bar {
        @include themes(background-color, navbar-default-toggle-icon-bar-bg);
      }
    }

    .navbar-link {
      @include themes(color, navbar-default-link-color);

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

    .btn-link {
      @include themes(color, navbar-default-link-color);

      &:hover,
      &:focus {
        color: $navbar-default-link-hover-color;
      }
      &[disabled],
      fieldset[disabled] & {
        &:hover,
        &:focus {
          @include themes(color, navbar-default-link-disabled-color);
        }
      }
    }

    @include media-breakpoint-down(sm) {
      .container-fluid {
        padding-left: $layout-margin;
        padding-right: $layout-margin;

        .navbar-collapse {
          margin-left: -$layout-margin;
          margin-right: -$layout-margin;
          padding-left: $layout-margin;
          padding-right: $layout-margin;
        }

        .navbar-nav {
          margin-left: -$layout-margin;
          margin-right: -$layout-margin;
          margin-top: 0;
          margin-bottom: 0;

          > li.dropdown > a {
            margin-top: $grid-unit-y * 2;
            margin-bottom: $grid-unit-y * 2;
            margin-right: $layout-margin;
          }

          > li > a {
            padding-left: $layout-margin !important;
            margin-top: $grid-unit-y;
            margin-bottom: $grid-unit-y;

            .avatar {
              @include avatar-size($avatar-sm);
            }
          }

          .dropdown-menu {
            @include themes(background-color, color-new-body-light);
          }
        }
      }
    }

    &-transparent {
      position: absolute;
      background-color: transparent;
      top: 0;
      left: 0;
      right: 0;
    }
  }

  &-toggle-abs {
    .container-fluid {
      position: relative;
    }

    .navbar-header {
      position: relative;

      @include media-breakpoint-down(md) {
        padding-left: $grid-unit-x * 5;
      }
    }

    .navbar-toggle {
      $button-size: $grid-unit-x * 4;

      height: $button-size;
      line-height: $button-size;
      padding: 0;
      position: absolute;
      top: 50%;
      margin-top: -(ceil($button-size * 0.5));
      margin-bottom: 0;
      right: 0;
      cursor: pointer;
      color: $gray;
      border-width: 0;
      font-size: $grid-unit-y * 2;

      &:hover,
      &:focus {
        background-color: transparent;
        color: $brand-primary;
      }

      &-left {
        right: auto;
        left: 0;
      }
    }

    &-right {
      @include media-breakpoint-down(md) {
        .navbar-header {
          padding-right: $grid-unit-x * 5;
        }
      }
    }
  }

  &-empty {
    @include media-breakpoint-up(lg) {
      min-height: 0;
      height: 0;
      overflow: hidden;

      .navbar-header {
        min-height: 0;
      }
    }
  }
}

.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;
    }
  }
}