//
// navbar.scss
// Extended from Bootstrap
//

.navbar {
  transition: $transition-base;
  transition-property: background-color, color;
  z-index: $zindex-fixed;

  &.blured {
    backdrop-filter: saturate(180%) blur(20px);
  }
}

// Dark version

.navbar-dark {

  @include media-breakpoint-down(md) {

    .navbar-nav .nav-item .nav-link {
      color: $navbar-light-color;

      &:hover,
      &:focus {
        color: $navbar-light-hover-color;
      }
    }

    .navbar-nav .nav-item.active .nav-link,
    .navbar-nav .nav-item .nav-link.active {
      color: $navbar-light-active-color;
    }

    .navbar-collapse .navbar-toggler {
      color: $navbar-light-color;
    }
  }
}

// Contaner

.navbar>.container,
.navbar>.container-fluid {
  padding-left: $grid-gutter-width / 2 !important;
  padding-right: $grid-gutter-width / 2 !important;
}

// Brand

.navbar-brand {
  font-weight: $navbar-brand-font-weight;
}

.navbar-brand-img {
  max-height: $navbar-brand-height;
  width: auto;
}

.navbar-dark .navbar-brand {
  filter: brightness(0) invert(1);
}

// change nav links and logo color if  shouldStayTransparent class
.navbar-dark.shouldStayTransparent {
  .navbar-nav .nav-link {
    filter: brightness(0.1) invert(1);
  }

  .navbar-brand {
    filter: brightness(1) invert(1);
  }
}

// Button

.navbar-btn {

  @include media-breakpoint-down(md) {
    width: 100%;
    padding: $btn-padding-y $btn-padding-x;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-size: $btn-font-size;
  }
}

// Navigation

.navbar-nav .nav-link {
  font-weight: $navbar-nav-link-font-weight;

  @include hover-focus {
    outline: none;
  }
}

// Boxed layout

.navbar-dark.fixed-top>.container {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -$navbar-padding-y;
    left: 0;
    border-top: $border-width solid fade-out($white, .8);
  }
}

// Collapse

@include media-breakpoint-down(md) {

  .navbar-collapse {
    position: fixed;
    top: $spacer;
    right: $spacer;
    left: $spacer;
    height: auto !important;
    max-height: calc(100vh - #{$spacer * 2});
    background-color: $dropdown-bg;
    border-radius: $dropdown-border-radius;
    box-shadow: $box-shadow-dark-lg;
    overflow-y: scroll; // This has to be scroll for iOS bounce scroll
    -webkit-overflow-scrolling: touch;
  }

  // Animation

  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    transition: $transition-base;
    transition-property: opacity, transform, -webkit-transform;
    transform-origin: top right;
  }

  .navbar-collapse.show {
    opacity: 1;
    transform: scale(1);
  }

  .navbar-collapse.collapsing {
    opacity: 0;
    transform: scale(.9);
  }

}

// Toggler

.navbar-collapse .navbar-toggler {
  position: absolute;
  top: $spacer;
  right: $spacer;
  z-index: 1;

  @include media-breakpoint-up(lg) {
    display: none;
  }
}

// Navigation

.navbar-nav .nav-item {

  @include media-breakpoint-down(md) {
    padding: $navbar-nav-item-spacing;

    +.nav-item {
      border-top: $border-width solid $gray-200;
    }
  }
}

.navbar-nav .nav-link {

  @include media-breakpoint-down(md) {
    padding-top: 0;
    padding-bottom: 0;
  }
}

// Dropdown menu

.navbar-nav .dropdown-menu {
  box-shadow: none;

  @include media-breakpoint-down(md) {
    min-width: 0;
    padding: 0;
  }

  @include media-breakpoint-up(lg) {
    box-shadow: $box-shadow-dark-lg;
  }
}

.navbar-nav .dropdown>.dropdown-menu {
  display: block !important;
}

.navbar-nav .dropright>.dropdown-menu {

  @include media-breakpoint-down(md) {
    padding-top: $spacer;
    padding-bottom: $spacer;
    padding-left: $spacer / 2;
  }
}

// Dropdown item

.navbar-nav .dropdown-item,
.navbar-nav .dropdown-header {

  @include media-breakpoint-down(md) {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

// Dropdown toggle

.navbar-nav .dropdown>.dropdown-toggle {

  &::after {
    display: none;
  }

  @include media-breakpoint-down(md) {
    margin-bottom: $navbar-dropdown-toggle-margin-bottom;
    pointer-events: none;
  }
}

.navbar-nav .dropright>.dropdown-toggle {
  display: flex;

  &::after {
    margin-left: auto;
  }

  @include media-breakpoint-down(md) {

    &::after {
      content: "\e92e";
    }

    &[aria-expanded="true"]::after {
      transform-origin: center center;
      transform: rotate(180deg);
    }
  }
}

// Dropdown image

.navbar-nav .dropdown-img-left {
  height: 100%;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: $dropdown-padding-y $dropdown-padding-x;
  background: no-repeat center center / cover;
  border-top-left-radius: $border-radius;
  border-bottom-left-radius: $border-radius;

  @include media-breakpoint-up(lg) {
    display: flex;
  }

  // Overlay

  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: fade-out($primary, .2);
    border-radius: inherit;
  }

  // Content

  * {
    position: relative;
  }
}

.navbar-nav .dropdown-menu-lg .dropdown-img-left,
.navbar-nav .dropdown-menu-xl .dropdown-img-left {

  @include media-breakpoint-up(lg) {
    padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
  }
}

// Dropdown body

.navbar-nav .dropdown-body {

  @include media-breakpoint-up(lg) {
    padding: $dropdown-padding-y $dropdown-padding-x;
  }
}

.navbar-nav .dropdown-menu-lg .dropdown-body,
.navbar-nav .dropdown-menu-xl .dropdown-body {

  @include media-breakpoint-up(lg) {
    padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
  }
}

// Dropdown list group

.navbar-nav .dropdown-menu .list-group-item {
  display: flex;
  align-items: center;
  padding-top: $spacer;
  padding-bottom: $spacer;
  color: inherit;

  @include hover {
    text-decoration: none;
  }
}

// Toggle dropdown on hover

@include media-breakpoint-up(lg) {

  .navbar-nav .dropdown-menu {
    z-index: $zindex-fixed;
    display: block !important;
    visibility: hidden;
    opacity: 0;
  }

  .navbar-nav .hovered>.dropdown-menu {
    transition: $transition-base;
    transition-property: opacity, visibility, transform, -webkit-transform;
    transform-origin: top center;
  }

  .navbar-nav .dropdown>.dropdown-menu {
    left: 50%;
    transform: translate3d(-50%, 10px, 0);
  }

  .navbar-nav .dropright>.dropdown-menu {
    transform: translate3d(0, 10px, 0);
  }

  .navbar-nav .dropdown.show>.dropdown-menu,
  .navbar-nav .dropright.show>.dropdown-menu {
    visibility: visible;
    opacity: 1;
  }

  .navbar-nav .dropdown.show>.dropdown-menu {
    transform: translate3d(-50%, 0, 0);
  }

  .navbar-nav .dropright.show>.dropdown-menu {
    transform: translate3d(0, 0, 0);
  }
}