//
// Navbar
//

.navbar {
  // TODO remove this block after upgrading Bootstrap to v4 beta
  align-items: center;
  flex-direction: unset;
  flex-wrap: wrap;
  justify-content: space-between;

  // TODO remove this block after upgrading Bootstrap to v4 beta
  > .container,
  > .container-fluid {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    // TODO remove this block after upgrading Bootstrap to v4 beta
    // Bugfix from BS4 alpha-6 that causes inner navbar contents within
    // .container's to not span the full width of the navbar
    @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
  }

  // Make things behave the way we expect them to--vertical centering of
  // supported inner navbar items
  .navbar-brand,
  .navbar-text,
  .navbar-nav .nav-link,
  .form-inline {
    align-items: center;
    display: flex;
  }

  // Allow padding around forms within navbars to be adjusted
  .form-inline {
    padding-bottom: $navbar-form-inline-padding-y;
    padding-top: $navbar-form-inline-padding-y;
  }
}


//
// Navbar brand
//

.navbar-brand {
  @include unset-link-underline();
  // Allow customization of brand font size
  font-size: $navbar-brand-font-size;
  font-weight: bold;
  line-height: 1.2;
  // Allow customization of space between .navbar-brand and other navbar items
  margin-right: $navbar-brand-margin-right;
  // Fix where Bootstrap doesn't properly utilize $navbar-brand-padding-y
  padding-bottom: $navbar-brand-padding-y;
  padding-top: $navbar-brand-padding-y;

  @include media-breakpoint-up(sm) {
    font-size: $navbar-brand-font-size-sm;
    margin-right: $navbar-brand-margin-right-sm;
  }
}


//
// Navbar nav
//

.navbar-nav {
  .nav-link {
    // Mimic .btn hover transitions
    @include transition($btn-transition);
    font-size: $navbar-nav-link-font-size;
    font-weight: bold;
    letter-spacing: $letter-spacing-base;
    line-height: $navbar-nav-link-line-height;
    padding: $navbar-nav-link-padding-y $navbar-nav-link-padding-x;
    text-transform: uppercase;

    @include hover-focus-active {
      text-decoration: none; // unset underline
    }

    &:focus:not(:focus-visible) {
      // Unset for navbar links
      outline: 0;
    }

    &.active {
      text-decoration: none; // unset underline
    }
  }
}


//
// Responsive navbar
//

// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
  flex-basis: 100%;
}

// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
  align-self: unset; // TODO remove line after upgrading to BS4 beta
  border-width: $navbar-toggler-border-width;
  margin-bottom: $navbar-toggler-margin-y;
  margin-top: $navbar-toggler-margin-y;

  &:focus:not(:focus-visible) {
    outline: 0;
  }
}

// Custom class for descriptive text within .navbar-toggler
.navbar-toggler-text {
  display: inline-block;
  font-size: $navbar-toggler-text-font-size;
  font-weight: bold;
  text-transform: uppercase;
  vertical-align: middle;

  &:hover {
    cursor: inherit;
  }
}

// Hamburger icon within toggle button
.navbar-toggler-icon {
  // Allow toggler icon dimensions to be configurable (Bootstrap assigns fixed
  // em values here)
  height: $navbar-toggler-icon-height;
  width: $navbar-toggler-icon-width;
}


// Generate series of `.navbar-toggleable-*` responsive classes for configuring
// where your navbar collapses.
//
// TODO rename class to .navbar-expand after upgrading to BS4 beta
.navbar-toggleable {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints); // TODO update $breakpoint to $next on this line after upgrading to BS4 beta

    &#{$infix} {
      // TODO remove block after upgrading to BS4 beta
      @include media-breakpoint-up($next) {
        align-items: unset;
        flex-wrap: nowrap;
        justify-content: flex-start;
      }

      // sass-lint:disable-block nesting-depth
      // Nesting required to match Bootstrap selectors

      // Theme-specific overrides

      &.navbar-light {
        // Primary color-specific overrides
        &.bg-primary {
          .navbar-nav {
            .dropdown-item {
              @include hover-focus {
                @include media-breakpoint-down($breakpoint) {
                  background-color: rgba(0, 0, 0, .1);
                }
              }
            }
          }
        }

        .navbar-nav {
          .dropdown-item {
            @include media-breakpoint-down($breakpoint) {
              color: $navbar-light-color;
            }

            @include hover-focus {
              @include media-breakpoint-down($breakpoint) {
                background-color: $navbar-light-hover-bg-color;
                color: $navbar-light-hover-color;
              }
            }

            &.disabled {
              @include media-breakpoint-down($breakpoint) {
                color: $navbar-light-disabled-color;
              }
            }
          }
        }
      }

      &.navbar-inverse {
        .navbar-nav {
          .dropdown-item {
            @include media-breakpoint-down($breakpoint) {
              color: $navbar-inverse-color;
            }

            @include hover-focus {
              @include media-breakpoint-down($breakpoint) {
                background-color: $navbar-inverse-hover-bg-color;
                color: $navbar-inverse-hover-color;
              }
            }

            &.disabled {
              @include media-breakpoint-down($breakpoint) {
                color: $navbar-inverse-disabled-color;
              }
            }
          }
        }
      }

      // General child element overrides

      .navbar-nav {
        .dropdown-menu {
          @include media-breakpoint-down($breakpoint) {
            background-color: transparent;
            border: 0 solid transparent;
            margin-top: 0;
          }

          // TODO remove block after upgrading to BS4 beta
          @include media-breakpoint-up($next) {
            position: absolute;
          }
        }

        .dropdown-item {
          @include hover-focus {
            @include media-breakpoint-down($breakpoint) {
              background-color: transparent;
            }
          }
        }

        .nav-item,
        .nav-link {
          @include media-breakpoint-up($next) {
            // Force nav link hover states to always consume 100% of the navbar
            // height, but only when the navbar is not collapsed (sets default
            // align-items: stretch)
            display: flex;
          }
        }

        .nav-link {
          @include media-breakpoint-down($breakpoint) {
            // Allow customizable padding specific to collapsed navbar
            padding: $navbar-collapsed-nav-link-padding-y $navbar-collapsed-nav-link-padding-x;
          }

          @include media-breakpoint-up($next) {
            // Override fixed left/right padding values set by Bootstrap.  Reset overridden
            // vertical padding values set above.
            padding: $navbar-nav-link-padding-y $navbar-nav-link-padding-x;
          }
        }
      }

      > .container,
      > .container-fluid {
        // TODO remove block after upgrading to BS4 beta
        @include media-breakpoint-down($breakpoint) {
          padding-left: 0;
          padding-right: 0;
        }

        // TODO remove block after upgrading to BS4 beta
        @include media-breakpoint-up($next) {
          align-items: center;
          display: flex;
          flex-wrap: nowrap;
        }

        .navbar-brand {
          @include media-breakpoint-down($breakpoint) {
            // Fixed left padding needs to be added here to match up with
            // grid gutters
            padding-left: ($grid-gutter-width-base * .5);
          }

          @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
            // Unset above override at -xs
            padding-left: 0;
          }
        }

        .navbar-toggler {
          @include media-breakpoint-down($breakpoint) {
            // Fixed left padding needs to be added here to match up with
            // grid gutters
            margin-right: ($grid-gutter-width-base * .5);
          }

          @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
            // Unset above override at -xs
            margin-right: 0;
          }
        }
      }

      .navbar-collapse {
        width: auto;

        @include media-breakpoint-up($next) {
          flex: 1 1 auto;
        }

        &.collapse.show,
        &.collapsing {
          @include media-breakpoint-down($breakpoint) {
            border-top: 1px solid;
          }

          @include media-breakpoint-up($next) {
            border-top: 0 solid transparent;
          }
        }
      }
    }
  }
}


//
// Navbar themes
//

.navbar-light,
.navbar-inverse {
  // sass-lint:disable-block nesting-depth
  .navbar-nav {
    .nav-link.disabled {
      &:hover,
      &:focus {
        background-color: transparent;
      }
    }
  }
}

// Dark links against a light background
.navbar-light {
  // Primary color-specific overrides
  &.bg-primary {
    // sass-lint:disable-block nesting-depth
    .navbar-nav {
      .nav-link {
        @include hover-focus {
          background-color: rgba(0, 0, 0, .1);

          &.dropdown-toggle::after {
            border-top-color: $brand-primary-darkest;
          }
        }
      }

      .show > .nav-link,
      .open > .nav-link,
      .active > .nav-link,
      .nav-link.open,
      .nav-link:hover,
      .nav-link.active,
      .nav-link:active {
        background-color: rgba(0, 0, 0, .1);
      }

      .show > .nav-link.dropdown-toggle::after {
        border-top-color: $brand-primary-color;
      }
    }
  }

  // Base light navbar styles
  a.navbar-brand { // sass-lint:disable-line no-qualifying-elements
    // Allow brand hover state color to be modified separately from
    // other link colors. Must use qualifying selector here to not
    // target .navbar-brand applied to non-link elements
    @include hover-focus {
      color: $navbar-light-brand-hover-color;
    }
  }

  .navbar-nav {
    .dropdown-toggle::after {
      border-top-color: $navbar-light-dropdown-caret-border;
    }

    .nav-link {
      @include hover-focus {
        background-color: $navbar-light-hover-bg-color;
      }
    }

    // sass-lint:disable nesting-depth
    .show > .nav-link,
    .open > .nav-link,
    .active > .nav-link,
    .nav-link.open,
    .nav-link:hover,
    .nav-link.active,
    .nav-link:active {
      background-color: $navbar-light-hover-bg-color;
    }

    .show > .nav-link.dropdown-toggle::after {
      border-top-color: $navbar-light-hover-color;
    }
    // sass-lint:enable nesting-depth
  }

  .navbar-toggler {
    &:not(.collapsed) {
      // sass-lint:disable-block nesting-depth
      background-color: $navbar-light-toggler-border;

      .navbar-toggler-text {
        color: $navbar-inverse-hover-color; // intentionally using -inverse variable here
      }

      .navbar-toggler-icon {
        background-image: $navbar-inverse-toggler-bg; // intentionally using -inverse variable here
      }
    }
  }
}

// White links against a dark background
.navbar-inverse {
  a.navbar-brand { // sass-lint:disable-line no-qualifying-elements
    // Allow brand hover state color to be modified separately from
    // other link colors. Must use qualifying selector here to not
    // target .navbar-brand applied to non-link elements
    @include hover-focus {
      color: $navbar-inverse-brand-hover-color;
    }
  }

  .navbar-nav {
    .dropdown-toggle::after {
      border-top-color: $navbar-inverse-dropdown-caret-border;
    }

    .nav-link {
      @include hover-focus {
        background-color: $navbar-inverse-hover-bg-color;
      }
    }

    // sass-lint:disable nesting-depth
    .show > .nav-link,
    .open > .nav-link,
    .active > .nav-link,
    .nav-link.open,
    .nav-link:hover,
    .nav-link.active,
    .nav-link:active {
      background-color: $navbar-inverse-hover-bg-color;
    }

    .dropdown.show .dropdown-toggle::after {
      border-top-color: $navbar-inverse-hover-color;
    }
    // sass-lint:enable nesting-depth
  }

  .navbar-toggler {
    &:not(.collapsed) {
      // sass-lint:disable-block nesting-depth
      background-color: $navbar-inverse-toggler-border;

      .navbar-toggler-text {
        color: $navbar-light-hover-color; // intentionally using -light variable here
      }

      .navbar-toggler-icon {
        background-image: $navbar-light-toggler-bg; // intentionally using -light variable here
      }
    }
  }
}