@import "~scss/variables";

/* Sidebar collapsing nonsense */
#main-sidebar-container {
  transition: margin-right $main-sidebar-collapse-duration ease;
  margin-right: $main-sidebar-width; // Push the rest of the page to the right

  // Above the backdrop, below Bootstrap modals
  z-index: 910;

  #main-sidebar {
    transition: left $main-sidebar-collapse-duration ease;
    left: 0; // Default: open
  }

  @include media-breakpoint-down(sm) {
    // On mobile, make the sidebar overlap the content instead of moving it
    margin-right: 0 !important;

    // Support collapsing only on mobile
    &.closed {
      #main-sidebar {
        left: -$main-sidebar-width;
      }
    }
  }
}

/* Actual sidebar styling */
#main-sidebar {
  width: $main-sidebar-width;

  position: fixed;
  top: $navbar-height;
  bottom: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  border-right: 1px solid $border-color-darker;
  background: $main-sidebar-bg;

  .sidebar-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    overflow-y: auto;

    flex: 1;
  }

  /* Separator headers */
  h6 {
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;

    color: $text-muted;

    // margin: 1rem 0 0 0;
    margin: 0;
    padding: 1rem 1rem 0.5rem 1rem;

    border-top: 1px solid $border-color;

    user-select: none;
  }
}

/* Backdrop for mobile */
#main-sidebar-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  transition: opacity $main-sidebar-collapse-duration ease;

  background: $main-sidebar-backdrop-bg;
  opacity: 0;

  // Ignore clicks when closed
  pointer-events: none;

  // Below the sidebar and Bootstrap modals
  z-index: 900;

  // Only show on mobile
  display: none;
  @include media-breakpoint-down(sm) {
    display: block;

    &.show {
      // Make clickable to hide when open
      pointer-events: all;
      cursor: pointer;

      opacity: $main-sidebar-backdrop-opacity;
    }
  }
}