// =========================================================================================
//     File Name: navigations.scss
//     Description: Common mixin for menus, contain dark and light version scss.
//     ----------------------------------------------------------------------------------------
//     Item Name: Frest HTML Admin Template
//     Version: 1.0
//     Author: PIXINVENT
//     Author URL: http://www.themeforest.net/user/pixinvent
// ==========================================================================================

// Import main menu mixin
@import "../mixins/main-menu-mixin";

/* Main Menu Base */
/* -------------- */

.main-menu {
  z-index: 1031;
  position: absolute;
  display: table-cell;
  height: 100%;
  overflow: hidden;

  // Perfect Scrollbar
  .ps__thumb-y {
    background-color: #d1d7de;
  }

  &.menu-light {
    @include menu-theme(
      $body-color,
      $body-bg,
      $border-color,
      $menu-light-sub-bg,
      $menu-light-active-bg
    );
  }

  &.menu-dark {
    @include menu-theme(
      $menu-dark-color,
      $menu-dark-bg-color,
      $theme-dark-border-color,
      $menu-dark-bg-color,
      $menu-dark-active-bg
    );
  }

  &.menu-fixed {
    position: fixed;
    top: 0;
  }
  &.menu-static {
    height: auto;
    top: 0;
    padding-bottom: calc(100% - 40rem);
    .main-menu-content {
      height: unset !important;
    }
  }

  .shadow-bottom {
    /* Menu Scroll Shadow */
    display: none;
    position: absolute;
    z-index: 2;
    height: 60px;
    width: 100%;
    pointer-events: none;
    margin-top: -1.3rem;
    filter: blur(5px);
    background: linear-gradient(
      #f2f4f4 41%,
      hsla(0, 0%, 100%, 0.11) 95%,
      hsla(0, 0%, 100%, 0)
    );
  }
  .navbar-header {
    height: 100%;
    width: $menu-expanded-width;
    height: $navbar-height - 0.4;
    position: relative;
    padding: 0.35rem 1.45rem 0.3rem 1.3rem;
    transition: 300ms ease all;
    cursor: pointer;
    z-index: 3;
    .navbar-brand {
      margin-top: 0.75rem;
      display: flex;
      align-items: center;
      .brand-logo {
        background: url("../../app-assets/images/logo/frest-logo.png") no-repeat;
        background-position: -65px -54px;
        height: 27px;
        width: 35px;
        float: left;
        margin-top: 0.2rem;
        margin-left: 3px;
      }

      .brand-text {
        color: $primary;
        padding-left: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.04rem;
        font-size: 1.5rem;
        float: left;
        animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1
          fadein;
      }
    }
    .modern-nav-toggle {
      animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1
        fadein;
      margin: 0.75rem 0 0;
    }
  }

  .main-menu-content {
    height: calc(100% - 6rem) !important;
    position: relative;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    &.navigation-main {
      overflow-x: hidden;
    }
  }
}

/* Main Navigation */
.navigation {
  font-family: $font-family-monospace;
  overflow-y: hidden;
  padding-bottom: 20px;

  .navigation-header {
    padding: 12px 22px;
    font-size: 0.8rem;
    text-transform: uppercase;
  }

  li {
    position: relative;
    white-space: nowrap;

    a {
      display: block;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    &.disabled {
      a {
        cursor: not-allowed;
      }
    }
  }
}

.dropdown-notification {
  padding: 13px 0;
  .nav-link-label {
    position: relative;
  }
  .media-heading {
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
  }
  .notification-text {
    margin-bottom: 0.5rem;
    font-size: smaller;
    color: $gray-200;
  }

  .notification-tag {
    position: relative;
    top: -4px;
  }
  .dropdown-menu.dropdown-menu-right {
    right: -2px;
    padding: 0;
    &::before {
      background: $primary;
      border-color: $primary;
    }
    .scrollable-container {
      .read-notification {
        background-color: #f2f4f4;
      }
    }
  }
  .dropdown-menu-header {
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
    background: $primary;
    .dropdown-header {
      color: $white;
    }
  }
}

// Collapsed Static Layout
body.menu-collapsed {
  .menu-static {
    padding-bottom: calc(100% - 14rem);
  }
}

// Media Queries For Small Screen Devices
@include media-breakpoint-down(sm) {
  // Menu Hide/Open Animation
  .menu-hide .main-menu,
  .menu-open .main-menu {
    transition: transform 0.25s, top 0.35s, height 0.35s;
  }

  .main-menu {
    transform: translate3d(-240px, 0, 0);
    backface-visibility: hidden;
    perspective: 1000;
  }

  .menu-open .main-menu {
    transform: translate3d(0, 0, 0);
  }
}

// Media Queries For Medium Screen Devices
@include media-breakpoint-up(md) {
  .drag-target {
    z-index: 0;
  }
}

// Fixed Footer Layout Set Menu-Fixed Height
body {
  &.fixed-footer {
    .main-menu {
      &.menu-fixed {
        height: 100%;
      }
    }
  }
}

// Media Queries Till Medium Screen Devices
@media (max-width: 992px) {
  body {
    .main-menu {
      &.menu-static {
        padding-bottom: 100%;
      }
    }
  }
}