/*
 * Kiln · backend · таблица с раскрывающимися узлами.
 *
 * Вид берёт у обычной таблицы: класс table стоит на ней тоже, и здесь
 * дописано только своё — отступ уровня, раскрывашка, значок узла.
 *
 * Деления на папки и файлы нет: узел раскрывается, если у него есть дети,
 * и при этом сам может быть содержимым.
 */

/*
 * Первая колонка несёт отступ уровня и раскрывашку, но поле слева у неё
 * общее: строка дерева начинается на той же вертикали, что строка
 * обычной таблицы и пункт сайдбара. Вложенность добавляется поверх, из
 * глубины строки.
 */
.outline-table .node {
    padding-right: var(--native-cell-gutter);
    padding-left: var(--native-cell-gutter);
}

/*
 * Содержимое узла в одну строку: раскрывашка, значок, название. Отступ
 * уровня приходит переменной со строки — инлайновый стиль в разметке не
 * живёт, а глубина у каждой строки своя.
 */
.outline-table .node > span {
    display: flex;
    align-items: center;
    gap: var(--native-node-gap);
    padding-left: calc(var(--native-node-step) * var(--depth, 0));
}

/* Название обрезается многоточием, значок и раскрывашка не сжимаются. */
.outline-table .node .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outline-table .node > span > svg,
.outline-table .node .toggle,
.outline-table .node .toggle-space {
    width: var(--native-node-toggle);
    height: var(--native-node-toggle);
    flex-shrink: 0;
}

/*
 * Раскрывашка. У узла без детей на её месте пустое место той же ширины:
 * иначе названия соседних строк не встают по одной линии.
 */
.outline-table .node .toggle {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--native-radius-small);
    background: none;
    color: inherit;
    cursor: default;
    transition: background var(--native-transition);
}

.outline-table .node .toggle:hover {
    background: color-mix(in srgb, currentcolor 8%, transparent);
}

/*
 * Шеврон поворачивается, а не подменяется другим значком: поворот видно
 * как движение, и раскрытие читается само.
 */
.outline-table .node .toggle > svg {
    width: var(--native-node-chevron);
    height: var(--native-node-chevron);
    transition: transform var(--native-transition);
}

.outline-table .node .toggle[aria-expanded='true'] > svg {
    transform: rotate(90deg);
}

/*
 * Правая колонка узкая: в ней стоит число записей или дата, а всё
 * место отдаётся названию. Без явной ширины таблица делит колонки
 * поровну, и длинные названия обрезаются на середине.
 */
.outline-table th:last-child,
.outline-table td:last-child {
    width: var(--native-node-aside, 96px);
}