/*
 * Kiln · backend · кнопка действия.
 *
 * Во всю ширину: действия под свойствами в инспекторе. Тег решают данные —
 * a со ссылкой, button без неё, вид у них один.
 */
.action-button {
    display: inline-flex;
    box-sizing: border-box;
    width: 100%;
    height: var(--native-control-height);
    align-items: center;
    justify-content: center;
    gap: var(--native-control-gap);
    border: 0;
    border-radius: var(--native-radius-control);
    background: var(--native-control-fill);
    color: inherit;
    font: inherit;
    font-size: var(--native-text);
    /*
     * Курсор обычный, а не палец: в нативном окне кнопка не превращает
     * указатель в веб-ссылку.
     */
    cursor: default;
    transition: background var(--native-transition);
}

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

/*
 * Значок внутри кнопки. Без своего размера svg берёт заводские 300×150 и
 * распирает кнопку: у библиотеки иконок размер приходит атрибутом, а у
 * значка, вставленного разметкой, его может не быть вовсе.
 */
.action-button > svg {
    width: var(--native-icon-small);
    height: var(--native-icon-small);
    flex-shrink: 0;
}