/*
 * Kiln · backend · панель инструментов.
 *
 * Одна строка на всю ширину контента: кнопка сворачивания сайдбара,
 * заголовок раздела, действия справа.
 */
.toolbar {
    display: flex;
    height: var(--native-toolbar-height);
    flex-shrink: 0;
    align-items: center;
    gap: var(--native-toolbar-gap);
    padding-inline: var(--native-chrome-gutter);
    border-bottom: var(--native-line) solid var(--native-separator);
    /*
     * Подложка полупрозрачная с размытием: содержимое, уезжающее под
     * панель при прокрутке, просвечивает сквозь неё, как в нативном окне.
     * Непрозрачная панель читалась бы как отдельная плашка над окном.
     */
    background: color-mix(
        in srgb,
        var(--native-chrome) 85%,
        transparent
    );
    backdrop-filter: blur(20px);
}

/*
 * Заголовок раздела. Длинное название обрезается многоточием, а не
 * переносится: панель ростом в одну строку, и второй строкой название
 * сдвинуло бы действия вниз.
 */
.toolbar > p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--native-label);
    font-size: var(--native-text-toolbar);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Действия прижаты к правому краю: разделитель забирает всё свободное
 * место между заголовком и ними.
 */
.toolbar > .toolbar-actions {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: var(--native-control-gap);
}