//
// Mixins: Sidebar
//

// Sidebar Color
@mixin sidebar-color($color) {
    background-color: transparent!important;
    background-image: linear-gradient(118deg, rgba($color, .95), rgba($color,.7));
    color: $white; //color-yiq($color);
    box-shadow: 0 0 8px 1px rgba($color, .7);
}

@mixin sidebar-color-snd($color) {
  background-color: rgba($color, .15)!important;
  color: $color!important;
  font-weight: 700;
  box-shadow: 0 0 8px 1px rgba($color, .15);
}

// Sidebar Mini Breakpoints
@mixin sidebar-mini-breakpoint() {
  // 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;
    overflow: hidden;
  }

  // When the sidebar is collapsed...
  &.sidebar-collapse {
    .d-hidden-mini {
      display: none;
    }

    // Apply the new margins to the main content and footer
    .content-wrapper,
    .main-footer,
    .main-header {
      margin-left: $sidebar-mini-width !important;
    }

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

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

    .sidebar .user-panel > .info,
    .nav-sidebar .nav-link p,
    .brand-text {
      margin-left: -10px;
      opacity: 0;
      visibility: hidden;
    }

    .logo-xl {
      opacity: 0;
      visibility: hidden;
    }

    .logo-xs {
      display: inline-block;
      opacity: 1;
      visibility: visible;
    }

    // Modify the sidebar to shrink instead of disappearing
    .main-sidebar {
      overflow-x: hidden;

      &,
      &::before {
        // Don't go away! Just shrink
        margin-left: 0;
        width: $sidebar-mini-width;
      }

      .user-panel {
        .image {
          float: none;
        }
      }

      &:hover,
      &.sidebar-focused {
        width: $sidebar-width;

        .brand-link {
          width: $sidebar-width;
        }

        .user-panel {
          text-align: left;

          .image {
            float: left;
          }
        }

        .user-panel > .info,
        .nav-sidebar .nav-link p,
        .brand-text,
        .logo-xl {
          display: inline-block;
          margin-left: 0;
          opacity: 1;
          visibility: visible;
        }

        .logo-xs {
          opacity: 0;
          visibility: hidden;
        }

        .brand-image {
          margin-right: .5rem;
        }

        // Make the sidebar links, menus, labels, badges
        // and angle icons disappear
        .sidebar-form,
        .user-panel > .info {
          display: block !important;
          -webkit-transform: translateZ(0);
        }

        .nav-sidebar > .nav-item > .nav-link > span {
          display: inline-block !important;
        }
      }
    }

    // Make an element visible only when sidebar mini is active
    .visible-sidebar-mini {
      display: block !important;
    }

    &.layout-fixed {
      .main-sidebar:hover {
        .brand-link {
          width: $sidebar-width;
        }
      }

      .brand-link {
        width: $sidebar-mini-width;
      }
    }
  }
}