@use "lib/viewport";

:root {
  --d-sidebar-active-background: var(--d-selected);
}

body.has-full-page-chat .sidebar-wrapper,
.sidebar-wrapper,
.sidebar-hamburger-dropdown {
  @include viewport.until(lg) {
    background: var(--secondary);

    .sidebar-footer-wrapper {
      background: var(--secondary);

      .sidebar-footer-container::before {
        display: none;
      }
    }
  }

  .has-full-page-chat &,
  .has-full-page-chat & .sidebar-footer-wrapper {
    background: transparent;
  }

  .sidebar-container {
    border-right: none;
  }

  .sidebar-section-link {
    transition: none;
    border-radius: var(--d-border-radius);
  }

  .dropdown-menu__item .sidebar-section-link {
    border-radius: 0;
  }
}

.sidebar-hamburger-dropdown {
  .sidebar-new-topic-button__wrapper {
    width: 100%;
    margin: 0 0 var(--space-2);
  }
}

.sidebar-section-wrapper {
  --d-sidebar-section-border-color: var(--d-sidebar-border-color);

  @include viewport.from(xl) {
    padding-block: 0.45em;
  }

  @include viewport.until(sm) {
    .hamburger-panel .revamped & {
      margin-bottom: var(--space-4);
    }
  }

  .sidebar-section-header {
    font-size: var(--font-down-2);
  }

  .sidebar-section-content {
    margin: 0;
    display: flex;
    flex-direction: column;

    @include viewport.from(xl) {
      gap: var(--space-1);
    }
  }
}

.sidebar-wrapper .sidebar-sections {
  --scrollbarThumbBg: var(--d-selected);
}

.sidebar-section-link-wrapper .sidebar-section-link:focus,
.sidebar-section-link-wrapper .sidebar-section-link:hover {
  .d-icon {
    color: var(--primary);
  }
}

// put the draft menu above the slide-out hamburger on small desktop screens
@include viewport.until(md) {
  html:not(.mobile-view) {
    .topic-drafts-menu-content {
      z-index: z("modal", "overlay");
    }
  }
}

.admin-area .sidebar-wrapper .admin-panel {
  --d-sidebar-highlight-background: var(--d-selected);
  --d-sidebar-link-icon-color: var(--d-sidebar-link-color);
}

.sidebar-theme-toggle__wrapper {
  order: -1;

  .d-icon-paintbrush {
    display: none;
  }
}

.sidebar-theme-toggle-dropdown.select-kit.combo-box .select-kit-header {
  padding-left: 1em;
}