/*
 * Kiln · backend · кнопка панели инструментов.
 *
 * Квадратная, со значком внутри. Тег решают данные: a со ссылкой, button
 * без неё.
 */

/*
 * Действие, меняющее данные, приходит формой: Rails заворачивает такую
 * кнопку в button_to. Форма это блок со своими правилами ширины, и без
 * этого кнопка внутри неё выходит шире соседних на несколько пикселей —
 * ряд значков перестаёт стоять по сетке.
 */
.toolbar form,
.toolbar-actions form {
    display: contents;
}

.toolbar-button {
    display: grid;
    box-sizing: border-box;
    width: var(--native-control-height);
    height: var(--native-control-height);
    min-width: var(--native-control-height);
    flex-shrink: 0;
    place-items: center;
    /* У button свои отступы от браузера: без обнуления кнопка выходит
       шире заданной ширины, и ряд значков сбивается с сетки. */
    padding: 0;
    border: 0;
    border-radius: var(--native-radius-control);
    background: none;
    color: var(--native-label-secondary);
    cursor: default;
    transition: background var(--native-transition);
}

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

/*
 * Значок внутри кнопки. Своего размера у svg может не быть — тогда он
 * берёт заводские 300×150 и распирает кнопку.
 */
.toolbar-button > svg {
    width: var(--native-icon);
    height: var(--native-icon);
}

/*
 * Нажатое состояние заливается акцентом целиком: так у Apple показаны
 * тумблеры панелей, а не рамкой или тенью.
 *
 * Заливка перебивает наведение: у нажатой кнопки подсветка под указателем
 * читалась бы как отжатие.
 */
.toolbar-button.active,
.toolbar-button.active:hover {
    background: var(--native-accent);
    color: var(--native-accent-foreground);
}

/*
 * Удаление. Своей заливки не получает: заливка в этой панели означает
 * нажатое состояние переключателя, а удаление ничего не переключает.
 * Красным становится только под указателем — до наведения ряд значков
 * не должен пестреть.
 */
.toolbar-button--delete:hover {
    background: color-mix(in srgb, var(--native-red, #e5484d) 12%, transparent);
    color: var(--native-red, #e5484d);
}