// Mixin and colors

@mixin navheader() {
  box-shadow: $large-shadow;
  @include borders();
  border-left: 0;
  border-right: 0;
}

@mixin colorize-navbar() {
    @each $name, $color in list-colors() {
        &-#{$name} { @include navbar-color(get-color($name), #FFF, #000); }
    }
}

@mixin navbar-color($background-color, $light-color, $dark-color) {
  background-color:$background-color;

  a {
    color: transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.5);
      &:hover, &:active {
        color: getTextColorFromBackground($background-color, $light-color, $dark-color);
      }

    &.disabled, &.navlink.disabled {
      color: transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.75);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    color: getTextColorFromBackground($background-color, $light-color, $dark-color);
  }

  .navbar-toggler {
    color: transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.75);
    border-color: transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.75);

    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='" + transparentize(getTextColorFromBackground($background-color, $light-color, $dark-color), 0.75) + "' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
  }
}

.navhead, .navbar {
  @include navheader();
  @include colorize-navbar;
}

.navhead .navbar, .navbar-transparent {
  border: none;
  box-shadow: none;
  background-color:transparent;
}

.navbar {
  padding:0;
  padding-left:$baselinerem;
  padding-right:$baselinerem;
  ul {
    padding-bottom:0;
  }
  @include li-no-margin();

  .nav-item .nav-link, .navbar-brand {
    padding:$baselinerem/2;
  }

  .nav-link:hover, .navbar-brand:hover {
    background-color: rgba(0,0,0,0.05);
  }
}

.dropdown-menu {
  box-shadow: $narrow-shadow, $inset-shadow;
  color: #444;
  a, a:hover, a:active {
    color: #444;
  }
}