// Navbar themes
//
// Styles for switching between navbars with light or dark background.

// stylelint-disable  selector-max-class

.navbar {
  --#{$prefix}navbar-bg-color: #{$navbar-light-bg-color};

  .nav-underline {
    --#{$prefix}navbar-nav-link-padding-x: 0;
  }

  &,
  &[data-bs-theme="light"],
  [data-bs-theme="light"] & {
    .theme-light-logo {
      display: inline-block;
    }
    .theme-dark-logo {
      display: none;
    }
  }

  &[data-bs-theme="dark"],
  [data-bs-theme="dark"] & {
    --#{$prefix}navbar-bg-color: #{$navbar-dark-bg-color};
    .theme-light-logo {
      display: none;
    }
    .theme-dark-logo {
      display: inline-block;
    }
  }

  .dropdown-menu {
    --#{$prefix}bg-opacity: 1;

    background-color: rgba(var(--#{$prefix}navbar-bg-color), var(--#{$prefix}bg-opacity));
  }
}

.navbar-bg {
  --#{$prefix}bg-opacity: 1;

  background-color: rgba(var(--#{$prefix}navbar-bg-color), var(--#{$prefix}bg-opacity));
  transition: $transition-base;

  // [data-scroll="sticky"] .masthead-navbar & {
  //   --#{$prefix}bg-opacity: 0;
  // }

  // .masthead:hover .if-navbar-hover--bg-opacity-1 &,
  // body:not(.scroll-down) .is-sticky .navbar &,
  // .masthead-offcanvas.show ~ .masthead-navbar & {
  //   --#{$prefix}bg-opacity: 1;
  // }

}


// stylelint-disable selector-max-compound-selectors
body:not([data-bs-theme="dark"]) .masthead:has(~ main > .section[data-bs-theme="dark"]:first-child)[data-scroll="sticky"]:not(.is-sticky, :hover, :has(.offcanvas.show)) {
  .theme-light-logo {
    display: none;
  }
  .theme-dark-logo {
    display: inline-block;
  }
}

// if first-child of sections-main is dark then we need to set the navbar color into dark mode temporarily
// body:not([data-bs-theme="dark"]) .masthead:has(~ main > .section[data-bs-theme="dark"]:first-child) {
//   &:not(.is-sticky) .offcanvas:not(.show) ~ .navbar:not(:hover),
//   &:not(.is-sticky) .navbar:not(:hover):first-child,
//   &:not(.is-sticky) .navbar ~ .navbar {
//     // --#{$prefix}navbar-color: #{$navbar-inverse-color};
//     // --#{$prefix}navbar-hover-color: #{$navbar-inverse-hover-color};
//     // --#{$prefix}navbar-disabled-color: #{$navbar-inverse-disabled-color};
//     // --#{$prefix}navbar-active-color: #{$navbar-inverse-active-color};
//     // --#{$prefix}navbar-toggler-border-color: #{$navbar-inverse-toggler-border-color};
//     // --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-inverse-toggler-icon-bg)};
//     // --#{$prefix}navbar-bg-color: #{$navbar-inverse-bg-color};

//     .theme-light-logo {
//       display: none;
//     }
//     .theme-dark-logo {
//       display: inline-block;
//     }
//   }
//   // &.sticky:not(.is-sticky, :hover) {
//   //   --#{$prefix}link-color: var(--#{$prefix}link-color-inverse);
//   //   --#{$prefix}link-hover-color: var(--#{$prefix}link-hover-color-inverse);
//   // }
// }