// =============================================================================
// SCSS/SITE/STACKS/INTEGRITY/_NAVBAR.SCSS
// -----------------------------------------------------------------------------
// Contains styles for the navbar.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Common Styles
//   02. Brand
//   03. Navigation
//   04. Fixed Navbar
//   05. Search
// =============================================================================

// Common Styles
// =============================================================================

.x-navbar {
  position: relative;
  overflow: visible;
  border-bottom: 1px solid $navbarOuterBorder;
  background-color: $navbarBackground;
  z-index: $zindexNavbar;
  @include font-size(1.4);
  @include box-shadow(#{$baseBoxShadowNavbar});
  @include translate3d(0, 0, 0);
}


//
// Set width to auto for default container.
// We then reset it for fixed navbars in the #gridSystem mixin.
//

.x-navbar .container {
  width: auto;
}


//
// Override the default collapsed state.
//

.x-nav-collapse.collapse {
  display: block;
  height: auto;
}



// Brand
// =============================================================================

.x-brand {
  display: inline-block;
  font-family: $altFontFamily;
  @include font-size(5.4);
  font-weight: $navbarBrandFontWeight;
  letter-spacing: -3px;
  line-height: 1;
  color: $navbarBrandColor;

  &:hover {
    text-decoration: none;
    color: $navbarBrandColor;
  }
}

.x-navbar .x-brand {
  float: left;
  display: block;
}



// Navigation
// =============================================================================

.x-navbar .x-nav {
  margin: 0;
}

.x-navbar .x-nav > li {
  float: left;
}

.masthead-inline .x-nav {
  display: block;
  float: right;
}

.masthead-stacked .x-nav {
  display: table;
  margin-left: auto;
  margin-right: auto;
  @include break(cubs) {
    display: block;
  }
}


//
// Links.
//

.x-navbar .x-nav > li > a {
  float: none;
  padding: 0 1.429em;
  line-height: 1;
  font-weight: $navbarLinkFontWeight;
  letter-spacing: 2px;
  text-decoration: none;
  color: $navbarLinkColor;
}

.x-navbar .x-nav li > a {
  &:after {
    content: "\f103";
    margin-left: 0.35em;
    letter-spacing: 0;
    @include font-awesome();
  }

  &:only-child:after {
    content: "";
    display: none;
  }
}


//
// Hover.
//

.x-navbar .x-nav > li > a:hover {
  text-decoration: none;
  color: $navbarLinkColorHover;
  background-color: $navbarLinkBackgroundHover;
  @include box-shadow($navbarTopLinkBoxShadowHover);
}


//
// Active nav items.
//

.x-navbar .x-nav > .sfHover > a,
.x-navbar .x-nav > .current-menu-item > a {
  text-decoration: none;
  color: $navbarLinkColorHover;
  background-color: $navbarLinkBackgroundHover;
  @include box-shadow(#{$navbarTopLinkBoxShadowHover});
}


//
// Navbar button for toggling navbar items in responsive layouts.
//

.x-btn-navbar {
  display: none;
  padding: 0.458em 0.625em;
  @include font-size(2.4);
  line-height: 1;
  text-shadow: $navbarBtnTextShadow;
  color: $navbarBtnColor;
  background-color: $navbarBtnBackgroundHover;
  border-radius: 4px;
  @include box-shadow($navbarBtnBoxShadowHover);
  @include transition(#{box-shadow 0.3s ease, color 0.3s ease, background-color 0.3s ease});

  &:hover {
    color: darken($navbarLinkColor, 15%);
  }
}

.x-btn-navbar.collapsed {
  color: $navbarBtnColorCollapsed;
  background-color: $navbarBtnBackground;
  @include box-shadow($navbarBtnBoxShadow);

  &:hover {
    color: darken($navbarLinkColor, 15%);
    background-color: $navbarBtnBackgroundHover;
    @include box-shadow($navbarBtnBoxShadowHover);
  }
}



// Fixed Navbar
// =============================================================================

//
// Shared top/bottom/left/right styles.
//

.x-navbar-fixed-top,
.x-navbar-fixed-left,
.x-navbar-fixed-right {
  position: fixed;
  z-index: $zindexNavbar;
}


//
// Top styles.
//

.x-navbar-fixed-top-active {
  .x-navbar-wrap {
    margin-bottom: 1px;
    height: $navbarHeight;
    @include break(cubs) {
      margin-bottom: 0;
      height: auto;
    }
  }
}

.x-navbar-fixed-top {
  top: 0;
  left: 0;
  right: 0;
}

// .x-boxed-layout-active .x-navbar-fixed-top {
//   left: 10px;
//   right: 10px;
// }


//
// Left/right styles.
//

.x-navbar-fixed-left,
.x-navbar-fixed-right {
  top: 0;
  bottom: 0;
  width: $navbarFixedSideWidth;

  .x-navbar-inner {
    height: 100%;

    > .x-container-fluid.width {
      width: 100%;
    }
  }

  .x-brand {
    float: none;
    text-align: center;
  }

  .x-nav {
    float: none;
    margin-top: 2em;

    > li {
      float: none;

      > a {
        text-align: center;
        padding: 20px 35px;

        &:focus,
        &:hover {
          
        }
      }
    }
  }
}

.x-navbar-fixed-left {
  left: 0;
  border-right: 1px solid $navbarOuterBorder;
  @include box-shadow($navbarLeftBoxShadow);
  @include break(cubs) {
    border-right: 0;
  }

  .x-nav > li > a {
    &:focus,
    &:hover {
      @include box-shadow($navbarLeftLinkBoxShadowHover)
    }
  }
}

.x-navbar-fixed-right {
  right: 0;
  border-left: 1px solid $navbarOuterBorder;
  @include box-shadow($navbarRightBoxShadow);
  @include break(cubs) {
    border-left: 0;
  }

  .x-nav > li > a {
    &:focus,
    &:hover {
      @include box-shadow($navbarRightLinkBoxShadowHover)
    }
  }
}



// Search
// =============================================================================

.x-navbar .x-nav li.menu-item-navbar-search {
  text-align: center;

  > a {
    letter-spacing: 0;

    &:after {
      display: none;
    }
  }
}