.navbar {
  // TODO: is there a cleaner way to do this? Ideally we should only overwrite what's really needed.
  // Reset Bootstrap 5.3 color mode inheritance for dropdowns inside navbar
  --bs-body-bg: #{$white};
  --bs-body-color: #{$body-color};
  --bs-dropdown-bg: #{$white};
  --bs-dropdown-color: #{$body-color};
  --bs-dropdown-link-color: #{$gray-700};
  --bs-dropdown-link-hover-color: #{$white};
  --bs-dropdown-link-hover-bg: #{$primary};

  @supports (backdrop-filter: blur(12px)) {
    background-color: rgba($primary, 0.85);
    backdrop-filter: saturate(50%) blur(12px);
  }

  @supports not (backdrop-filter: blur(12px)) {
    background-color: rgba($primary, 0.95);
  }

  & .navbar-brand,
  & .nav-link,
  & .form-control.components-filterinput {
    min-height: 2.6rem;
  }

  & .navbar-brand {
    min-width: 2.6rem;
  }

  & .components-navbar-button {
    &.navbar-brand {
      padding: 0.4rem 0.3rem;
      line-height: 1.8rem;
    }

    &:hover {
      border-radius: 0.4rem;

      @supports (backdrop-filter: blur(12px)) {
        background-color: rgb(var(--karma-bg-focused-rgb, 81, 113, 132), 0.5);
      }

      @supports not (backdrop-filter: blur(12px)) {
        background-color: var(--karma-bg-focused);
      }
    }
  }

  & .components-navbar-icon {
    color: $navbar-dark-color;

    &.cursor-pointer:hover {
      color: $navbar-dark-hover-color;
    }
  }
}
