@use "@coreui/coreui/scss/mixins/color-mode" as *;

.docs-sidebar {
  --cui-sidebar-bg: var(--cui-tertiary-bg);
  --cui-sidebar-brand-bg: transparent;
  --cui-sidebar-brand-color: var(--cui-body-color);

  .sidebar-nav {
    --cui-sidebar-nav-link-color: var(--cui-body-color);
    --cui-sidebar-nav-link-active-bg: transparent;
    --cui-sidebar-nav-link-active-color: var(--cui-primary);
    --cui-sidebar-nav-link-hover-bg: transparent;
    --cui-sidebar-nav-link-hover-color: var(--cui-primary);
    --cui-sidebar-nav-link-icon-margin: 1rem;
    --cui-sidebar-nav-group-bg: transparent;
    --cui-sidebar-nav-group-toggle-show-color: var(--cui-primary);

    .compact .nav-link {
      --cui-sidebar-nav-link-padding-y: .375rem;
    }

    .nav-group-items {
      --cui-sidebar-nav-link-color: var(--cui-body-color);
    }
  }
}

@include color-mode(dark) {
  .docs-sidebar {
    --cui-sidebar-bg: var(--cui-body-bg);
  }
}
