$item-spacing: 10px;
$navbar-transition-speed: $banner-animation-speed;

/**
 * Override Bootstrap navigation class, .navbar, ruleset
 */
.navbar {
  height: $application-navbar-static-height;
  transition: top $navbar-transition-speed ease;
  margin: 0;
  border: 0;
  z-index: z('nav');

  &-inverse {
    /**
     * Overrides the styling for navbar
     */
    background-color: $brand-color;
    border-color: $brand-color;
  }

  .navbar-nav {
    > .active {
      /**
       * Overrides the navbar styles on anchor elements
       */
      > a {
        @include on-event(true) {
          background-color: inherit;
        }
      }
    }
  }
  /// Offset is meant to accomodate for the animation that slides everything in the app-view down for the
  /// sake of the banner alerts
  &.navbar-top-offset {
    top: $banner-alerts-height;
  }

  .navbar-collapse {
    display: flex !important; // in order to override bootstrap !important

    .navbar-left {
      float: none !important; // in order to override bootstrap !important
      flex-grow: 1;
      display: flex;
      align-items: center;
      > * {
        flex-grow: 1;
      }
    }

    .navbar-right {
      float: none !important; // in order to override bootstrap !important
      display: flex;
      align-items: center;
    }
  }
}

.navbar-inverse {
  .navbar {
    &-brand {
      display: flex;
      align-items: center;
      height: $application-navbar-static-height;
      color: white;

      &:hover {
        color: get-color(gray3);
      }
    }

    &-brand-text {
      margin-left: item-spacing(2);
    }
  }
}

/**
 * Beta insignia for navbar logo
 */
.beta-badge {
  font-weight: fw(normal, 400);
  letter-spacing: 5px;
}

/**
 * Allow bootstrap dropdown items to be rendered when the mouse hovers over
 * the .dropdown trigger
 */
.dropdown {
  @include respond-to('large') {
    &:hover {
      > .dropdown-menu {
        display: block;
      }
    }
  }
}

/**
 * Styles the non primary action bar for an entity
 */
.secondary-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  &__action + &__action {
    margin-left: $item-spacing;
  }
}

/**
 * Styles the action bar on a tab component
 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  border-width: 1px 0 0;
  background-color: #f8f8f8;
  z-index: z(dropdown);
  max-height: 50px;

  &__content {
    white-space: nowrap;
    vertical-align: top;
    padding: item-spacing(1);

    &__error-messages {
      display: inline-flex;
      align-items: center;
      color: get-color(red5);
      margin-left: item-spacing(2);
      padding-right: item-spacing(2);
    }
  }

  &__item + &__item {
    margin-left: $item-spacing;
  }
}

/**
 * Styles a container list of navigation items
 */
.tabbed-navigation-list {
  white-space: nowrap;

  &--tab {
    border-radius: 0;
  }
}

/**
 * Adds styles for navigation bar avatar image
 */
.navbar-avatar-image {
  &#{&} {
    @include round-image(item-spacing(6));
  }
}