/* Файл: client/js/Widgets/Button.css
   Визуальный стиль виджета Button (см. Widgets/Button.js) — см. комментарий в Field.css про то,
   почему это не общий файл. */

/* margin-right убран (2026-09-30) — расстояние до соседней кнопки теперь даёт gap родительской
   Group (см. Widgets/Group.js), а не собственный отступ кнопки. Раньше margin-right + gap
   складывались (двойной зазор 20px вместо 10) — см. обсуждение. */
/* ПРАВИЛО (2026-10-18, явное решение пользователя после инцидента с тикетом var(--ink, #133)): padding
   .form-button НЕ переопределять НИ В ОДНОМ другом CSS-файле (ни по классу-предку, ни через
   специфичность селектора) — ни ради узкой колонки таблицы, ни ради любой другой "частной"
   причины. Раньше Table.css дважды переопределяла это через .canvas-table-td > .form-button и
   .tcg-cell > .tcg-item-button > .form-button — оба правила УБРАНЫ (обсуждение 2026-10-18).
   Единственный законный способ изменить padding КОНКРЕТНОЙ кнопки — её собственное свойство
   Internal Padding (node.padding, см. Button.js), которое программист задаёт явно в панели
   свойств. Это значение из единственного источника (дефолта ниже) НЕЛЬЗЯ продублировать или
   перебить в другом файле — при добавлении нового контейнера/виджета, который держит кнопку
   внутри себя, не трогать padding .form-button оттуда, искать другое решение (например ширину
   трека колонки, см. Widgets/Table.js::columnGridTrack). */
/* 3D-объём ВСЕХ кнопок (2026-11-13, умеренный) — ЕДИНСТВЕННОЕ место стиля кнопок.
   Повешено на тег button (а не только .form-button), чтобы объём получили и кнопки,
   нарисованные инлайновыми стилями (модалки, админка, конфигуратор): тень накладывается
   поверх любого фона, инлайновый background её не перебивает. Эффект — тенями, без
   градиента, поэтому цвет кнопки остаётся её собственный.
   Чтобы это правило доставало до всех страниц, Button.css подключён на всех HTML-страницах. */
button {
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,  /* верхний блик */
                0 3px 0 rgba(0,0,0,0.20),               /* нижний «бортик» */
                0 4px 8px rgba(0,0,0,0.16);             /* мягкая падающая тень */
    transition: box-shadow .08s ease, transform .08s ease;
}
button:active {
    transform: translateY(2px);                         /* вдавливается при нажатии */
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset,
                0 1px 0 rgba(0,0,0,0.20),
                0 2px 4px rgba(0,0,0,0.14);
}
button:disabled {
    box-shadow: none;                                   /* неактивная — плоская */
    transform: none;
}

.form-button {
    padding: 10px 15px;
    background-color: var(--accent, #0078d7);
    color: var(--accent-ink, #fff);
    font-size: var(--font-size, 14px);
    font-weight: normal;
    border: none;
    border-radius: var(--radius, 10px);
    cursor: pointer;
}
.form-button:hover {
    background-color: var(--accent-strong, #005a9e);
}
.form-button:disabled {
    background-color: var(--muted-soft, #aaa);
    cursor: not-allowed;
    opacity: 0.7;
}