body {
  --sidebar-width: #{$sidebar-width};

  &.minimenu {
    --sidebar-width: #{$sidebar-compact-width};
  }
}

/* Scope - can be a regular div if not using sco-pe */

#sidebar-scope {
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
}

/* Sidebar */

.sidebar {
  --bs-body-color: #{$sidebar-link-color};
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  direction: ltr;
  background: $sidebar-bg;
  display: none;
  flex-direction: column;
  height: 100%;
  // z-index: 1041;

  // Offcanvas
  &.offcanvas {
    position: absolute;
    display: flex;
  }
}

// It should have a .scroller class as well
.sidebar-content {
  --scroller-color: #{$sidebar-scroller-color};
  --scroller-color-lightness: #{$sidebar-scroller-lightness};
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  // This allow cta to be at the bottom
  justify-content: space-between;
  overscroll-behavior: contain;
  overflow-y: auto;
}

.sidebar-nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

#sidebar-selector {
  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid $sidebar-border-color;
  border-radius: 0;
  color: $sidebar-link-color;

  option {
    background-color: $sidebar-cta-bg;
  }

  &:focus {
    box-shadow: none;
  }
}

// Sidebar links
.sidebar-link {
  display: block;
  padding: $sidebar-link-padding;
  font-weight: $sidebar-link-font-weight;
  transition: background 0.1s ease-in-out;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  border-left-style: solid;
  border-left-width: 2px;
  color: $sidebar-link-color;
  border-left-color: $sidebar-link-border-left-color;

  l-i {
    margin-right: calc($sidebar-link-padding-x - 2px);
    color: $sidebar-link-icon-color;
  }

  &:focus {
    outline: 0;
    border-left-color: $sidebar-link-hover-color;
  }

  &:hover {
    color: $sidebar-link-hover-color;
    background: unset;
    border-left-color: $sidebar-link-hover-border-left-color;
    text-decoration: none;

    l-i {
      color: currentColor;
    }
  }
}

// Active items (on A)
.sidebar-item .sidebar-link.active,
.sidebar-item .sidebar-link.active:hover {
  color: $sidebar-link-active-color;
  background: $sidebar-link-active-bg;
  border-left-color: $sidebar-link-active-border-left-color;

  l-i {
    color: currentColor;
  }
}

// Sidebar brand
.sidebar-brand {
  font-weight: $sidebar-brand-font-weight;
  font-size: $sidebar-brand-font-size;
  padding: 0 $sidebar-brand-padding;
  display: flex;
  align-items: center;
  justify-content: center;
  color: $sidebar-brand-color;
  flex: 0 0 $sidebar-brand-height;
  background: $sidebar-brand-bg;
  border-bottom: 1px solid $sidebar-border-color;
  // Bottom shadow
  box-shadow: inset 0 -7px 9px -7px rgba(0, 0, 0, 0.4);

  &:hover {
    text-decoration: none;
    color: $sidebar-brand-color;
  }

  &:focus {
    outline: 0;
  }

  .sidebar-brand-icon {
    margin-right: $sidebar-brand-padding;

    svg,
    img {
      max-height: $sidebar-brand-height * 0.5;
      width: auto;
    }
  }

  .sidebar-brand-title {
    white-space: nowrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.sidebar-profile {
  border: 0;
  border-bottom: 1px solid $sidebar-border-color;
  padding: $sidebar-link-padding;
  display: block;
  width: 100%;
  text-align: left;
  color: $sidebar-link-color;

  img {
    display: block;
    float: left;
    margin-right: $spacer * 0.5;
  }

  // We use data-bs-display="static"
  .dropdown-menu {
    // Align with actual trigger, not with the icon
    left: calc($sidebar-link-padding-x + ($spacer * 0.5) + 44px);
    top: ($sidebar-cta-padding * 0.5) + 1.5rem;
  }

  .sidebar-profile-name {
    color: $primary;
    padding: 0;
  }

  .sidebar-profile-subtitle {
    opacity: 0.7;
    pointer-events: none;
  }
}

.sidebar-footer,
.sidebar-profile-mini {
  display: flex;
  flex: 0 0 $sidebar-footer-height;
  align-items: center;
  justify-content: space-between;

  l-i {
    --size: 20px;
  }

  l-i+span {
    margin-left: $sidebar-link-padding-x;
  }

  >.btn,
  >div {
    max-width: $sidebar-compact-width * 0.5;
  }

  .btn,
  div>.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;

    // Reduce spacing to avoid icons moving around
    padding: 0 $spacer * 0.5;

    &:hover {
      color: $primary;
    }

    &:focus {
      box-shadow: none;
      color: $white;
    }
  }
}

.sidebar-profile-mini {
  border: 0;
  border-bottom: 1px solid $sidebar-border-color;

  .sidebar-profile-mininame {
    display: flex;
    max-width: calc(100% - $sidebar-footer-height);
    padding: $sidebar-link-padding;
  }

  >.btn {
    color: $primary;

    &:hover {
      color: $white;
    }

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.sidebar-footer {
  border-top: 1px solid $sidebar-border-color;

  // Hover buttons should have full bg height
  >.btn,
  >div,
  >div>.btn {
    height: 100%;
  }
}

// Sidebar nav header
.sidebar-nav-header {
  background: transparent;
  padding: $sidebar-nav-header-padding;
  font-size: $sidebar-nav-header-font-size;
  color: $sidebar-nav-header-color;
}

// Badges
.sidebar-badge {
  position: absolute;
  right: 15px;
  top: 14px;
  z-index: 1;
}

// Sidebar bottom (thanks to sidebar-content being flexed)
.sidebar-cta {

  // Hide dropdown toggle if not on minimenu
  .dropdown-toggle {
    display: none;
    background: $sidebar-cta-bg;
    color: $sidebar-cta-color;
  }

  // Show the content of the dropdown element
  .dropdown-menu {
    display: block;
    position: inherit;
  }

  .sidebar-cta-content {
    min-width: calc($sidebar-width - ($sidebar-cta-margin * 2));
    max-width: 100%;
    padding: $sidebar-cta-padding;
    margin: $sidebar-cta-margin;
    border-radius: $sidebar-cta-border-radius;
    background: $sidebar-cta-bg;
    color: $sidebar-cta-color;
  }
}

// Compact sidebar
.minimenu .sidebar {
  .sidebar-nav-header {
    height: 1px;
    padding: 0;
    background: $sidebar-cta-bg;
    text-indent: -9999px;
  }

  .sidebar-brand {
    .sidebar-brand-title {
      display: none;
    }

    .sidebar-brand-icon {
      margin-right: 0;
    }
  }

  .sidebar-link {
    l-i {
      --size: 24px;
      display: flex;
      margin: 0 auto;
    }

    span {
      display: none;
    }

    // Collapse to dot and show tooltip
    span.sidebar-badge {
      text-indent: -9999px;
      display: block;
      padding: 0;
      width: 6px;
      height: 6px;
      --tooltip-enable: true;
    }
  }

  .sidebar-cta {
    padding: 0.5rem;

    &.dropdown,
    &.dropup {
      position: inherit;
    }

    .dropdown-toggle {
      display: block;
    }

    // The element is absolutely positioned on the page because we removed the position relative
    // This is required to make the element go out of the parent overflow:scroll
    .dropdown-menu {
      display: none;
      left: $sidebar-compact-width + 2px;
      bottom: $sidebar-footer-height;
    }

    // .dropdown-toggle:focus + .dropdown-menu,
    .dropdown-menu.show {
      display: block;
      position: absolute;
    }

    .sidebar-cta-content {
      margin: 0;
    }
  }

  .sidebar-profile {
    padding: ($sidebar-cta-padding * 0.5);

    .sidebar-profile-name,
    .sidebar-profile-subtitle {
      display: none;
    }

    img {
      float: none;
      margin: 0 auto;
    }

    .dropdown-menu {
      top: ($sidebar-cta-padding * 0.5);
    }
  }

  .sidebar-footer,
  .sidebar-profile-mini {
    >a {
      width: 50%;
      max-width: none;
    }

    .btn span {
      display: none;
    }
  }

  .sidebar-toggle {
    transform: scaleX(-1);
  }
}

@include media-breakpoint-up(md) {
  .sidebar {
    display: flex;
  }
}

.sidebar.show {
  display: flex;
  position: fixed;
}

@if $enable-dark-mode {
  @include color-mode(dark) {
    .sidebar {
      background: $sidebar-bg-dark;
    }

    .sidebar-brand {
      background: $sidebar-brand-bg-dark;
    }

    .sidebar-footer {
      background: $sidebar-brand-bg-dark;
    }
  }
}