// Hide during loading.
navbar,
[is="navbar"] { visibility: hidden; }

%nav-link {
  @extend %no-decoration;
  display: inline-block;
  padding: $nav-link-padding-y $nav-link-padding-x;
  font-family: inherit;
  font-size: inherit;
  color: $nav-link-color;
  @include transition(color $transition-duration $transition-timing-function);

  &:hover { color: $nav-link-hover-color; }
}

%nav-button {
  @extend %btn-common;
  display: inline-block;
  background-color: transparent;
  outline: none;
}

.navbar {
  position: relative;
  z-index: $z-index-nav;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: $nav-font;
  font-size: $nav-font-size;
  line-height: $nav-line-height;
  background-color: $nav-bg-color;

  .navbar-header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    justify-content: space-between;
    height: $navbar-header-height;
  }

  .navbar-body {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.navbar-nav {
  @include reset-list;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav-item {
  text-align: left;

  &.active .nav-link {
    color: $nav-active-color;
  }

  .nav-link {
    @extend %nav-link;
  }
}

.nav-button {
  @extend %nav-button;
  @extend %nav-link;
}

.navbar-brand {
  display: flex;
  width: auto;

  &.text {
    @extend %nav-link;

    &.active {
      color: $nav-active-color;
    }
  }
}

.navbar-toggle {
  @extend %nav-button;

  .icon-bar1,
  .icon-bar2,
  .icon-bar3 {
    width: $navbar-toggle-width;
    height: round($navbar-toggle-width / 7);
    margin: round($navbar-toggle-width * 6 / 35);
    background-color: $nav-link-color;
    @include border-radius($border-radius-sm);
    @include transition();
  }

  &.change {
    .icon-bar1 {
      transform: rotate(-45deg) translate(round($navbar-toggle-width * -9 / 35), round($navbar-toggle-width * 7 / 35));
    }

    .icon-bar2 {
      opacity: 0;
    }

    .icon-bar3 {
      transform: rotate(45deg) translate(round($navbar-toggle-width * -8 / 35), round($navbar-toggle-width * -7 / 35));
    }
  }

  &.right {
    position: absolute;
    right: $space-2;
  }
}

// responsive: only-mobile.
@include media-only-mobile {
  .navbar,
  .navbar-body,
  .navbar-nav {
    flex-wrap: wrap;
    width: 100%;
  }

  .nav-item {
    width: 100%;
    text-align: center;
    .nav-link { width: 100%; }
  }

  .navbar-header {
    align-self: flex-start;
    width: 100%;
  }

  .navbar-toggle { display: inline-block; }
}

// navbar dropdown
// scss-lint:disable MergeableSelector
.nav-item .dropdown {
  .dropdown-button {
    @extend %nav-button;
    @extend %nav-link;
    min-width: $dropdown-min-width;
    line-height: $nav-line-height;
  }
}

@include media-only-mobile {
  .nav-item {
    .dropdown {
      width: 100%;
      .dropdown-button { width: 100%; }
    }
    // Content need padding that for popper.js's preventOverflow.
    // Padding value is 5px, and it will on both sides.
    .dropdown-content { width: calc(100% - 10px); }
  }
}