/*
 * Боковое меню: выделение текущего пункта.
 *
 * Текущий пункт отличался от соседей только цветом текста — #248afd у верхнего
 * уровня, #667895 у подпунктов — и на списке из двадцати строк эту разницу глаз
 * не ловил. Добавляем подложку и полосу слева.
 *
 * Значения одни на обе темы: боковая панель тёмная и в светлой теме, так что
 * подсветка на ней работает одинаково. Тёмная тема берёт эти же переменные.
 */
:root {
    --nav-active-ink: #6cb2ff;
    --nav-active-bg: rgba(108, 178, 255, .10);
}

/*
 * Разметка меню двух видов: у раздела с подпунктами класс `active` стоит на
 * <li>, у самостоятельной страницы — сразу на ссылке. Ловим оба.
 *
 * Селекторы с `.sidebar-dark`: правила темы объявлены именно так, и без этого
 * класса вес не добирает — подложка и цвет не применялись бы.
 */
.sidebar-dark .sidebar .nav .nav-link.active,
.sidebar .nav .nav-link.active,
.sidebar-dark .sidebar .nav .nav-item.active > .nav-link,
.sidebar-dark .sidebar .nav .nav-item.active > * > .nav-link,
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item.active > * > .nav-link {
    background: var(--nav-active-bg);
    box-shadow: inset 3px 0 0 var(--nav-active-ink);
}

.sidebar-dark .sidebar .nav .nav-link.active i,
.sidebar-dark .sidebar .nav .nav-link.active .menu-title,
.sidebar .nav .nav-link.active i,
.sidebar .nav .nav-link.active .menu-title,
.sidebar-dark .sidebar .nav .nav-item.active > .nav-link i,
.sidebar-dark .sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar-dark .sidebar .nav .nav-item.active > * > .nav-link i,
.sidebar-dark .sidebar .nav .nav-item.active > * > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link .menu-title {
    color: var(--nav-active-ink);
}

.sidebar-dark .sidebar .nav.sub-menu .nav-item .nav-link.active,
.sidebar .nav.sub-menu .nav-item .nav-link.active {
    color: var(--nav-active-ink);
    background: var(--nav-active-bg);
    box-shadow: inset 3px 0 0 var(--nav-active-ink);
    font-weight: 600;
}

/* Точка-маркер перед активным подпунктом красится вместе с ним. */
.sidebar .nav.sub-menu .nav-item:has(> .nav-link.active)::before {
    background: var(--nav-active-ink);
}

/* В свёрнутом меню строки нет — полоса легла бы поперёк иконки. */
.sidebar-icon-only .sidebar .nav .nav-item.active > .nav-link,
.sidebar-icon-only .sidebar .nav .nav-item.active > * > .nav-link,
.sidebar-icon-only .sidebar .nav .nav-link.active {
    box-shadow: none;
}