/* NavBar
   ==========================================================================
   The blue navigation bar that contains the view title and navigation options
*/

/**
 * Base styles for the navigation bar
 *
 * All variants of the NavBar have these styles in common
 */

.NavBar {
  @include background-color(blue);
  @include floatContainer;
  display: block;
  width: 100%;
}

/**
 * Main navbar title
 */

.NavBar-title {
  @include font-size(large);
  @include line-height(x-tight);
  color: #fff;
  margin: 0;
}

/**
 * Override standard link color in the navbar title
 */
.NavBar-title-link {
  color: #fff;
}

/**
 * Override standard link hover color in the navbar title
 */

.NavBar-title-link:hover,
.NavBar-title-link:focus {
  color: #fff;
}


/* Desktop NavBar
   ==========================================================================
   Desktop app variant of the blue navigation bar that contains the company
   name and navigation options
*/

/**
 * 1. Only has a `padding-top` value because of the tabbed navigation in the
 *    desktop app that sits flush with the bottom of the NavBar.
 * 2. Applied in the ruleset because the desktop app does not currently use
 *   `box-sizing: border-box` by default.
 */

.NavBar--desktop {
  /* 1 */
  @include padding-top(default);
  /* 2 */
  box-sizing: border-box;
}

/**
 * Main navbar title
 * 1. Matches the `padding-top` on the `.NavBar`
 * 2. Applied in the ruleset because the desktop app does not currently use
 *   `box-sizing: border-box` by default.
 * 3. Moves the title in from the left to keep it aligned with the navigation
 *    tabs
 */

.NavBar--desktop .NavBar-title {
  /* 1 */
  @include margin-bottom(default);
  /* 2 */
  box-sizing: border-box;
  /* 3 */
  margin-left: 15px;
}