@use '../variables/bootstrap' as *;
@import "../../../../node_modules/bootstrap/scss/functions";
@import "../../../../node_modules/bootstrap/scss/variables";
@import "../../../../node_modules/bootstrap/scss/mixins";

/* For org navbar custom height */
#org-navbar {
  border-radius: 0px;
  margin-top: -20px;
}
@media (min-width: 768px) {
  #org-navbar .navbar-nav li a {
    line-height: 102px;
    height: 102px;
    padding-top: 0;
  }
}
@media (min-width: 768px) {
  #admin-dropdown ul li a, #super-admin-dropdown ul li a {
    line-height: 26px !important;
    height: 26px !important;
    margin-top: 3px !important;
  }
}

#org-navbar {
  margin-top: -20px;

  #banner-org-name {
    margin-top: 40px;
  }
}
@media (min-width: 768px) {
  #org-navbar .navbar-nav li a {
    line-height: 102px;
    height: 102px;
    padding-top: 0;
    color: $navbar-org-link-color;
    &:hover,
    &:focus {
      color: shade-color($navbar-org-link-hover-color,10%)
    }
  }
  #org-navbar .org-links {
    padding-top: calc($grid-gutter-width / 2);
  }
  #org-navbar .org-a {
    line-height: 36px !important;
    height: 36px !important;
    vertical-align: middle !important;
    padding-top: 0;
    padding-bottom: 0;
  }
}

// Branding navbar. This is defined as a clone of .navbar-branding with customizations
.navbar-branding {
  @extend .navbar-inverse !optional;
  background-color: $navbar-branding-bg;
  border-color: $navbar-branding-border;

  .navbar-text {
    color: $navbar-branding-color;
  }

  .navbar-nav {
    > li > a {
      color: $navbar-branding-link-color;

      &:hover,
      &:focus {
        color: $navbar-branding-link-hover-color;
        background-color: $navbar-branding-link-hover-bg;
      }
    }
    > .active > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-branding-link-active-color;
        background-color: $navbar-branding-link-active-bg;
      }
    }
    > .disabled > a {
      &,
      &:hover,
      &:focus {
        color: $navbar-branding-link-disabled-color;
        background-color: $navbar-branding-link-disabled-bg;
      }
    }
  }

  // Darken the responsive nav toggle
  .navbar-toggle {
    border-color: $navbar-branding-toggle-border-color;
    &:hover,
    &:focus {
      background-color: $navbar-branding-toggle-hover-bg;
    }
    .icon-bar {
      background-color: $navbar-branding-toggle-icon-bar-bg;
    }
  }

  .navbar-collapse,
  .navbar-form {
    border-color: shade-color($navbar-branding-bg, 7%);
  }

  // Dropdowns
  .navbar-nav {
    > .open > a {
      &,
      &:hover,
      &:focus {
        background-color: $navbar-branding-link-active-bg;
        color: $navbar-branding-link-active-color;
      }
    }

    @include media-breakpoint-down(lg) {
      // Dropdowns get custom display
      .open .dropdown-menu {
        > .dropdown-header {
          border-color: $navbar-branding-border;
        }
        .divider {
          background-color: $navbar-branding-border;
        }
        > li > a {
          color: $navbar-branding-link-color;
          &:hover,
          &:focus {
            color: $navbar-branding-link-hover-color;
            background-color: $navbar-branding-link-hover-bg;
          }
        }
        > .active > a {
          &,
          &:hover,
          &:focus {
            color: $navbar-branding-link-active-color;
            background-color: $navbar-branding-link-active-bg;
          }
        }
        > .disabled > a {
          &,
          &:hover,
          &:focus {
            color: $navbar-branding-link-disabled-color;
            background-color: $navbar-branding-link-disabled-bg;
          }
        }
      }
    }
  }

  .btn-link {
    color: $navbar-branding-link-color;
    &:hover,
    &:focus {
      color: $navbar-branding-link-hover-color;
    }
    &[disabled],
    fieldset[disabled] & {
      &:hover,
      &:focus {
        color: $navbar-branding-link-disabled-color;
      }
    }
  }
}
