// ┌────────────────┐
// │ Navbar: Custom │
// └────────────────┘

// Moves the hamburger icon to the left side of the navbar
.navbar-toggle{
  float: left;
  margin-left: $navbar-padding-horizontal;
  margin-right: 0px;
}

// Sets the font-size of the brand and navbar links slightly smaller than base
.navbar-nav,
.navbar-brand,
.navbar-btn,
.navbar-text,
.navbar-form,
.navbar-form input,
.navbar-form button,
.navbar-nav .dropdown-menu {
	font-weight: 400;
	font-size: ceil(($font-size-base * 0.9));
	// Bump weight of span for branding up coinciding with navbar-nav
	.gis {
		font-weight: 600;
	}
  // Reduce the font-size in drop-down menus for better touch targets
  @media (max-width: 767px) {
    font-size: ceil(($font-size-base * 0.8));   
  }
}



// Ease the hover state in and out
.navbar-brand {
	&:hover {
		transition: color 150ms linear, text-decoration 150ms linear;
	}
}

// Places a small profile image in the user menu
.navbar-icon {
	width: 28px;
  position: relative;
  float: left;
  padding-right: 6px;
}

// Add a rule and color transition to the top of navbar nav links
.navbar-nav {
  > li {
    > a {
      &:hover,
      &:focus {
        background-image: linear-gradient(to top, transparent 92%, $Calcite_Blue_a200 93%, $Calcite_Blue_a200 100%);
        transition: color 150ms linear, text-decoration 150ms linear;
      }
      @media (max-width: 767px) {
        &:hover,
        &:focus {
          background-image: none;
        }         
      }
    }
  }
}

