/* =============================================================
   COMPONENT / BUTTON
   
   Одна база + модификаторы через CSS-переменные.
   Добавить новый цвет = 4 строки вместо 8.
   
   Как это работает:
   - .btn задаёт переменные --btn-* и применяет их.
   - Модификатор (.btn.red) переопределяет переменные.
   - Каскад выбирает победителя по специфичности.
   - Внутри .btn читается уже победившее значение.
   ============================================================= */

.btn {
    /* ---------------------------------------------------------
       ЗНАЧЕНИЯ ПО УМОЛЧАНИЮ
       Модификаторы переопределяют только нужные переменные.
       --------------------------------------------------------- */
    --btn-bg: transparent;
    --btn-bg-hover: var(--btn-bg);
    --btn-bg-active: var(--btn-bg);
    --btn-fg: var(--text-primary);
    --btn-fg-hover: var(--btn-fg);
    --btn-border: transparent;
    --btn-radius: var(--radius-sm);
    --btn-padding: 8px 16px;
    --btn-shadow: var(--shadow-control);
    --btn-shadow-hover: var(--shadow-control-hover);
    --btn-shadow-active: var(--shadow-control-active);

    /* ---------------------------------------------------------
       ПРИМЕНЕНИЕ
       --------------------------------------------------------- */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);

    font: inherit;
    font-weight: var(--fw-medium);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;

    box-shadow: var(--btn-shadow);
    transition:
        background-color var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

/* Интерактивные состояния — только когда кнопка не disabled */
.btn:not([disabled]):hover,
.btn:not([disabled]):focus-visible {
    background-color: var(--btn-bg-hover);
    color: var(--btn-fg-hover);
    box-shadow: var(--btn-shadow-hover);
}

.btn:not([disabled]):active {
    background-color: var(--btn-bg-active);
    box-shadow: var(--btn-shadow-active);
}

/* Отключённая кнопка */
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

/* =============================================================
   ЦВЕТОВЫЕ ВАРИАНТЫ
   ============================================================= */

/* Красная (danger) — удаление, опасные действия */
.btn.red {
    --btn-bg: var(--red-700);
    --btn-bg-hover: var(--red-900);
    --btn-bg-active: var(--red-900);
    --btn-fg: white;
    --btn-fg-hover: white;
}

/* Зелёная (success) — подтверждение, готово */
.btn.green {
    --btn-bg: var(--green-700);
    --btn-bg-hover: var(--green-900);
    --btn-bg-active: var(--green-900);
    --btn-fg: white;
    --btn-fg-hover: white;
}

/* Синяя (info / primary) — основное действие, ссылки */
.btn.blue {
    --btn-bg: var(--blue-700);
    --btn-bg-hover: var(--blue-900);
    --btn-bg-active: var(--blue-900);
    --btn-fg: white;
    --btn-fg-hover: white;
}

/* Светло-серая (нейтральная) — второстепенное действие */
.btn.whitesmoke {
    --btn-bg: var(--neutral-100);
    --btn-bg-hover: var(--neutral-300);
    --btn-bg-active: var(--neutral-300);
    --btn-fg: var(--text-primary);
}

/* =============================================================
   ФОРМ-ФАКТОРЫ
   ============================================================= */

/* Прозрачная (text / ghost) — без тени, с фоном только на hover.
   Классика для второстепенных кнопок внутри таблиц, карточек. */
.btn.text {
    --btn-shadow: none;
    --btn-shadow-hover: none;
    --btn-shadow-active: none;
    --btn-bg: transparent;
    --btn-bg-hover: var(--bg-surface-alt);
    --btn-bg-active: var(--bg-surface-alt);
}

/* Круглая иконочная кнопка.
   Размер задаётся содержимым (svg обычно 24×24).
   Никаких теней, никакого padding — просто кликабельная иконка. */
.btn.icon {
    --btn-padding: 0;
    --btn-radius: 0;
    --btn-shadow: none;
    --btn-shadow-hover: none;
    --btn-shadow-active: none;
    display: inline-grid;
    place-items: center;
}

/* Активное состояние иконочной кнопки (например, закладка).
   Красим сам svg через fill — stroke при этом остаётся none. */
.btn.icon.active svg {
    fill: var(--text-primary);
}

/* "Три точки" — вертикальное меню действий.
   Красный на hover, как намёк на потенциально опасное действие.
   Используется в таблицах как триггер выпадающего меню. */
.btn.vellip {
    --btn-shadow: none;
    --btn-shadow-hover: none;
    --btn-shadow-active: none;
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-bg-active: transparent;
    --btn-fg: var(--text-primary);
    --btn-fg-hover: var(--red-900);
}

.btn.vellip:active {
    color: var(--red-500);
}

/* Светлый вариант vellip — для тёмных панелей (bottom-panel и т.п.) */
.btn.vellip.light {
    --btn-fg: white;
    --btn-fg-hover: white;
}

/* Широкая — на всю ширину контейнера.
   display: flex, а не inline-flex — иначе не растянется.
   Родитель должен задавать width или быть block/grid. */
.btn.wide {
    display: flex;
    width: 100%;
}

/* =============================================================
   ИКОНКИ ВНУТРИ КНОПОК
   
   stroke: currentColor — иконка наследует цвет текста кнопки.
   Значит, при hover/active цвет меняется автоматически.
   ============================================================= */

.btn svg.icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    pointer-events: none;
}

/* =============================================================
   ФОКУС
   
   Переопределяем настройки фокуса из base/a11y.css:
   - offset: внутрь, чтобы не обрезался границей
   - radius: чуть больше границы кнопки
   ============================================================= */

.btn {
    --focus-offset: -2px;
    --focus-radius: calc(var(--btn-radius) + 2px);
}