@mixin navbar-variant($name, $mode, $primary, $secondary, $color) {
  $font-color: get-mode-color($mode, "color", $color);
  $btn-bg: get-mode-color($mode, "button-bg", $secondary);

  .navbar-#{$name} {
    background-color: $primary;
    color: $font-color;

    .nav-capsule {
      background-color: $btn-bg;
      color: $font-color;

      .nav-link {
        color: inherit;

        @include hover-focus { color: $color; }
      }
    }

    .navbar-brand {
      color: $color;

      &::after { border-color: rgba($color, 0.2); }
    }

    .navbar-switcher .dropdown-toggle::after {
      background-color: $btn-bg;
      color: $font-color;

      @include hover-focus {
        background-color: get-mode-color($mode, "switcher-hover", $secondary);
        color: $color;
      }
    }

    .navbar-user {
      border-color: $primary;

      .user-initial {
        $lightness: lightness($primary) - lightness($white);

        background-color: $white;
        color: if($lightness > -30, color-yiq($primary), $primary);
      }
    }

    .form-control {
      background-color: transparent !important;
      border-color: $btn-bg;
      color: $color;

      @include hover-focus {
        border-color: $secondary;
        & + .btn { border-color: $secondary; }
      }

      &::placeholder { color: $font-color; }

      & + .btn {
        background-color: transparent;
        border-color: $btn-bg;
        color: $font-color;

        @include hover-focus { color: $color; }
      }
    }

    .input-group .dropdown .dropdown-toggle,
    sds-sidenav-trigger .btn {
      @extend .nav-capsule;

      @include hover-focus { color: $color; }
    }
  }
}

@function get-mode-color($mode, $name, $color: "none") {
  @if $color == "none" {
    $color: $white;

    @if $mode == "dark" {
      $color: $black;
    }
  }

  @return rgba($color, nested-map-get($navbar-mode, $mode, $name));
}