//
// Core: Sidebar Mini
//

// A fix for text overflow while transitioning from sidebar mini to full sidebar
.nav-sidebar,
.nav-sidebar > .nav-header,
.nav-sidebar .nav-link {
  white-space: nowrap;
}

.sidebar-collapse:not(.sidebar-horizontal) {
  .main-sidebar {
    min-width: $sidebar-mini-width;
    max-width: $sidebar-mini-width;
  }

  // Make the sidebar headers
  .nav-sidebar .nav-header {
    display: none;
  }

  .nav-sidebar .nav-link p {
    width: 0;
    white-space: nowrap;
  }

  .sidebar .user-panel > .info,
  .nav-sidebar .nav-link p,
  .brand-link {
    margin-left: -10px;
    animation-name: fadeOut;
    animation-duration: $transition-speed;
    animation-fill-mode: both;
    visibility: hidden;
  }

  &.sidebar-hover {
    .main-sidebar {
      min-width: $sidebar-width;
      max-width: $sidebar-width;
    }

    .nav-sidebar .nav-header {
      display: inline-block;
    }

    .sidebar .user-panel > .info,
    .nav-sidebar .nav-link p,
    .brand-link {
      margin-left: 0;
      animation-name: fadeIn;
      animation-duration: $transition-speed;
      animation-fill-mode: both;
      visibility: visible;
    }
  }
}

// .sidebar-mini.sidebar-collapse:not(.layout-fixed):not(.sidebar-horizontal) {
//   .sidebar {
//     overflow: visible;

//     .nav-sidebar .nav-item:hover {
//       position: relative;

//       .nav-link {
//         border-top-right-radius: 0;
//         border-bottom-right-radius: 0;
//       }

//       span {
//         animation: none;
//         z-index: $zindex-sidebar + 12;
//         visibility: visible;
//         display: inline-block;
//         position: absolute;
//         width: $sidebar-width;
//         left: $sidebar-mini-width;
//         top: 0;
//         background-color: inherit;
//         padding: inherit;
//         padding-left: 1rem;
//         margin-left: -1rem;
//         border-top-left-radius: 0;
//         border-bottom-left-radius: 0;
//       }
//     }
//   }
// }

.sidebar-is-opening {
  .sidebar .user-panel > .info,
  .nav-sidebar .nav-link p,
  .brand-link {
    margin-left: 0;
    animation-name: fadeIn;
    animation-duration: $transition-speed;
    animation-fill-mode: both;
    visibility: visible;
  }
}

.sidebar-is-collapsing {
  .sidebar .user-panel > .info,
  .nav-sidebar .nav-link p,
  .brand-link {
    margin-left: -10px;
    animation-name: fadeOut;
    animation-duration: $transition-speed;
    animation-fill-mode: both;
    visibility: visible;
  }
}