//
// navbar.scss
// Extended from Bootstrap
//
#conv-nav {
  .navbar {
    transition: $transition-base;
    transition-property: background-color, color;
    z-index: $zindex-fixed;

    &.blured {
      // // background: $opacity-gray-9;
      -webkit-backdrop-filter: $backdrop-filter;
      backdrop-filter: $backdrop-filter;
      background: $opacity-gray-9;
    }
  }

  // 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, 0.8);
    }
  }

  // Collapse

  @include media-breakpoint-down(md) {
    .navbar-collapse {
      position: fixed;
      top: $spacer;
      left: $spacer;
      height: auto;
      max-height: calc(100% - #{$spacer * 2}) !important;
      width: calc(100% - #{$spacer * 2});
      background-color: $dropdown-bg;
      border-radius: $dropdown-border-radius;
      box-shadow: $box-shadow-dark-lg;
      overflow-x: hidden;
      overflow-y: scroll;
    }

    // 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(0.9);
    }
  }

  // Toggler

  .navbar .navbar-toggler {
    margin-left: auto;
  }

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

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

  // Navigation

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

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

  .navbar-collapse .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-up(lg) {
      box-shadow: $box-shadow-dark-lg;
    }
  }

  .navbar-collapse .navbar-nav .dropdown-menu {
    @include media-breakpoint-down(md) {
      min-width: 0;
      padding: 0;
    }
  }

  .navbar-collapse .navbar-nav .dropdown > .dropdown-menu {
    @include media-breakpoint-down(md) {
      display: block !important;
    }
  }

  .navbar-collapse .navbar-nav .dropright > .dropdown-menu {
    @include media-breakpoint-down(md) {
      padding-top: $spacer;
      padding-bottom: $spacer;
      padding-left: $spacer / 2;
    }
  }

  // Dropdown item

  .navbar-collapse .navbar-nav .dropdown-item,
  .navbar-collapse .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;
    }
  }

  .navbar-collapse .navbar-nav .dropdown > .dropdown-toggle {
    @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;
    }
  }

  .navbar-collapse .navbar-nav .dropright > .dropdown-toggle {
    @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, 0.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 {
      display: none;
      opacity: 0;
      transition: $transition-base;
      transition-property: opacity, transform, -webkit-transform;
    }

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

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

    .navbar-nav .dropdown-menu.showing {
      display: block;
    }

    .navbar-nav .dropdown-menu.show {
      display: block;
      opacity: 1;
    }

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

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