/*
 * Kiln · backend · сайдбар.
 *
 * Колонка разделов слева, на всю высоту окна. Относится к приложению
 * целиком, а не к разделу, поэтому стоит вне split-view: тот делит
 * содержимое, а сайдбар стоит рядом с ним.
 *
 * Своей библиотеки компонентов пакет не тянет: нужен список ссылок в
 * колонке, а не двадцать четыре файла со скелетонами и бейджами.
 */
.sidebar {
    display: flex;
    box-sizing: border-box;
    width: var(--native-sidebar-width);
    height: 100%;
    flex-direction: column;
    flex-shrink: 0;
    border-right: var(--native-line) solid var(--native-separator);
    /* Подложка темнее контента: колонка читается как часть окна, не как страница. */
    background: var(--native-sidebar);
    color: var(--native-label);
    font-size: var(--native-text);
}

/* Шапка: логотип и название приложения. Высота равна панели инструментов. */
.sidebar > header {
    display: flex;
    height: var(--native-toolbar-height);
    flex-shrink: 0;
    align-items: center;
    padding-inline: var(--native-sidebar-gutter);
}

/*
 * Название сайта это ссылка на сам сайт: отдельного пункта «Открыть
 * сайт» в списке разделов нет, туда переходят отсюда.
 *
 * Раскладку держит ссылка, а не шапка: значок и название теперь лежат
 * внутри неё, и разводить их по разным уровням незачем.
 */
.sidebar__site {
    display: flex;
    align-items: center;
    /* Поле съедается отрицательным отступом: подсветка при наведении
       должна быть шире текста, а название при этом обязано остаться на
       одной линии с разделами под ним. */
    padding: 4px var(--native-sidebar-item-gutter);
    margin-inline: calc(var(--native-sidebar-item-gutter) * -1);
    border-radius: var(--native-radius-control);
    color: inherit;
    cursor: default;
    gap: var(--native-control-gap);
    text-decoration: none;
    transition: background var(--native-transition);
}

.sidebar__site:hover {
    background: var(--native-control-fill);
}

.sidebar__site > svg {
    flex-shrink: 0;
}

.sidebar__site > b {
    overflow: hidden;
    font-size: var(--native-text-toolbar);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Разделы скроллятся сами: длинный список не должен тянуть за собой
 * шапку с логотипом и подвал со ссылкой на сайт.
 */
.sidebar > nav {
    min-height: 0;
    flex: 1;
    overflow: auto;
    padding-inline: var(--native-sidebar-gutter);
}

/* Подвал прижат к низу колонки: между ним и разделами место забирает nav. */
.sidebar > footer {
    flex-shrink: 0;
    padding: var(--native-sidebar-gutter);
}

/*
 * Список разделов. Маркеры и поля списка снимаются: пункт здесь строка со
 * значком, а не элемент перечня.
 */
.sidebar menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Группы разделов внутри сайдбара — это блок section: подзаголовок и
 * пункты под ним. Своего блока не заводится, но поле подзаголовка здесь
 * равно полю пункта, иначе метка группы не встаёт по одной линии с
 * названиями под ней.
 */
.sidebar .section > p:first-child {
    padding-inline: var(--native-sidebar-item-gutter);
}

/*
 * Пункт: значок и название в строку. Курсор обычный, а не палец: в
 * нативном окне раздел выбирается, а не открывается как ссылка.
 */
.sidebar menu a {
    display: flex;
    align-items: center;
    gap: var(--native-sidebar-gap);
    padding: var(--native-sidebar-item-space) var(--native-sidebar-item-gutter);
    border-radius: var(--native-radius-control);
    color: inherit;
    cursor: default;
    text-decoration: none;
    transition: background var(--native-transition);
}

.sidebar menu a:hover {
    background: var(--native-control-fill);
}

/*
 * Текущий раздел помечается классом here, как в меню половины frontend:
 * одна пометка в разметке, и она же единственная.
 */
.sidebar menu a.here {
    background: var(--native-control-fill-hover);
}

/* Значок не сжимается: место уступает название, а не он. */
.sidebar menu a > svg {
    width: var(--native-icon);
    height: var(--native-icon);
    flex-shrink: 0;
    color: var(--native-label-secondary);
}

/* Длинное название обрезается: колонка постоянной ширины. */
.sidebar menu a > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Выход. Это действие, а не переход, поэтому в разметке стоит button_to,
 * а не ссылка: по ссылке выход выполнил бы предзагрузчик страниц.
 * Кнопке возвращается вид пункта сайдбара — снаружи разницы быть не
 * должно.
 */
.sidebar menu form {
    margin: 0;
}

.sidebar menu button {
    display: flex;
    /* Высота и поля задаются пунктом, а не общим правилом кнопок
       отправки из backend.css: там кнопка синяя и во всю ширину. */
    height: auto;
    padding-inline: var(--native-sidebar-item-gutter);
    width: 100%;
    align-items: center;
    gap: var(--native-sidebar-gap);
    padding: var(--native-sidebar-item-space) var(--native-sidebar-item-gutter);
    border: 0;
    border-radius: var(--native-radius-control);
    background: none;
    color: inherit;
    cursor: default;
    font: inherit;
    text-align: start;
    transition: background var(--native-transition);
}

.sidebar menu button:hover {
    background: var(--native-control-fill);
}

.sidebar menu button > svg {
    width: var(--native-icon);
    height: var(--native-icon);
    flex-shrink: 0;
    color: var(--native-label-secondary);
}