/*
 * Кнопки проекта. Требует токенов dbdev.ui.theme.
 *
 * Не опирается на .btn и не должен с ним совмещаться: у Bootstrap, СИМАЯ и bsfix три разных
 * контракта на этот класс. Ниже ::before гасится защитно, на случай если .btn всё же приедет.
 *
 * Кольцо фокуса — box-shadow, а не outline: СИМАЯ глушит outline правилом
 * body * { outline: none !important }, и любой outline на этом сайте просто не виден.
 *
 * Цвета варианта задаются через локальные переменные --dbdev-ui-button-*, а не напрямую:
 * это позволяет одним правилом с якорной специфичностью перебить a:hover от темы сайта,
 * не дублируя каждый вариант отдельно и не прибегая к !important.
 *
 * line-height задан в px, а не множителем, и гарнитура закреплена — это одно решение.
 * Текст внутри кнопки смещается на дробную часть half-leading: (line-height − content area) / 2,
 * где content area это ascent + descent шрифта, а не кегль. Округление half-leading зависит
 * от гарнитуры, поэтому значения подбираются замером, а не формулой.
 * Значения 20 / 20 / 16 / 12 подобраны замером на полностью загруженном Roboto: только на них
 * асимметрия строки равна нулю во всех четырёх размерах. С прежними множителями база уезжала
 * вверх на 1.9 px. Величина не зависит от подписи, но зависит от гарнитуры и кегля.
 * Менять кегль или гарнитуру без пересчёта нельзя: .local/tests/dbdev-ui-button-roboto-geometry.html.
 *
 * Порядок правил значим: специфичность у модификаторов одинаковая, выигрывает то, что ниже.
 * Hover-состояния закрыты guard-ом :not(:disabled):not([aria-disabled="true"]):not(.is-disabled),
 * иначе выключенная кнопка подсвечивалась бы при наведении.
 */

.dbdev-ui-button {
    --dbdev-ui-button-size: 40px;
    --dbdev-ui-button-fg: var(--dbdev-ui-text-secondary, #4e5964);
    --dbdev-ui-button-bg: var(--dbdev-ui-surface, #fff);
    --dbdev-ui-button-bd: var(--dbdev-ui-border, #e2e7ec);
    --dbdev-ui-button-ring: var(--dbdev-ui-accent-focus, rgba(230, 62, 17, .22));
    /* Подъём и кольцо фокуса — две независимые тени, а не одна переменная: иначе hover
       перебивал бы focus-visible по специфичности и кольцо не появлялось бы под курсором.
       Нейтральное значение — прозрачная тень нулевого размера: none в списке недопустим. */
    --dbdev-ui-button-shadow: 0 0 0 0 transparent;
    --dbdev-ui-button-ring-shadow: 0 0 0 0 transparent;

    display: inline-flex;
    box-sizing: border-box;
    min-height: var(--dbdev-ui-button-size);
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid var(--dbdev-ui-button-bd);
    border-radius: 8px;
    background: var(--dbdev-ui-button-bg);
    background-image: none;
    box-shadow: var(--dbdev-ui-button-ring-shadow), var(--dbdev-ui-button-shadow);
    color: var(--dbdev-ui-button-fg);
    cursor: pointer;
    /* Гарнитура закреплена: line-height ниже подобран под метрики Roboto. */
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    /* Длинные русские подписи должны переноситься, а не растягивать кнопку. */
    white-space: normal;
    appearance: none;
    transition: border-color .16s ease,
        background-color .16s ease,
        box-shadow .16s ease,
        color .16s ease,
        transform .16s ease;
}

/* Защита от унаследованного затемняющего слоя СИМАЯ, если рядом окажется .btn. */
.dbdev-ui-button::before {
    content: none;
}

/* Тема сайта задаёт a { color } и a:hover { color; text-decoration }. Одно правило
   с якорной специфичностью перекрывает оба, поэтому ссылка и кнопка выглядят одинаково. */
a.dbdev-ui-button,
a.dbdev-ui-button:hover,
a.dbdev-ui-button:focus {
    color: var(--dbdev-ui-button-fg);
    text-decoration: none;
}

/* --- Варианты ------------------------------------------------------------ */

.dbdev-ui-button--primary {
    --dbdev-ui-button-fg: var(--dbdev-ui-surface, #fff);
    --dbdev-ui-button-bg: var(--dbdev-ui-accent, #e63e11);
    --dbdev-ui-button-bd: var(--dbdev-ui-accent, #e63e11);
}

.dbdev-ui-button--primary:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled),
.dbdev-ui-button--primary:focus-visible {
    --dbdev-ui-button-bg: var(--dbdev-ui-accent-hover, #bd2f09);
    --dbdev-ui-button-bd: var(--dbdev-ui-accent-hover, #bd2f09);
}

.dbdev-ui-button--secondary {
    --dbdev-ui-button-fg: var(--dbdev-ui-text-secondary, #4e5964);
    --dbdev-ui-button-bg: var(--dbdev-ui-surface, #fff);
    --dbdev-ui-button-bd: var(--dbdev-ui-border, #e2e7ec);
}

/* Иконка вторичной кнопки остаётся акцентной — так же, как в исходных кнопках профиля. */
.dbdev-ui-button--secondary > i {
    color: var(--dbdev-ui-accent, #e63e11);
}

.dbdev-ui-button--secondary:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled),
.dbdev-ui-button--secondary:focus-visible {
    --dbdev-ui-button-fg: var(--dbdev-ui-accent-hover, #bd2f09);
    --dbdev-ui-button-bg: var(--dbdev-ui-accent-soft, rgba(230, 62, 17, .07));
    --dbdev-ui-button-bd: var(--dbdev-ui-accent-border, rgba(230, 62, 17, .28));
}

/* Опасное действие: рамочный вариант, как исходные btn-outline-danger. */
.dbdev-ui-button--danger {
    --dbdev-ui-button-fg: var(--dbdev-ui-danger-text, #991b1b);
    --dbdev-ui-button-bg: var(--dbdev-ui-surface, #fff);
    --dbdev-ui-button-bd: var(--dbdev-ui-danger-border, #fecaca);
    --dbdev-ui-button-ring: var(--dbdev-ui-danger-border, #fecaca);
}

.dbdev-ui-button--danger:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled),
.dbdev-ui-button--danger:focus-visible {
    --dbdev-ui-button-bg: var(--dbdev-ui-danger-surface, #fef2f2);
    --dbdev-ui-button-bd: var(--dbdev-ui-danger, #dc2626);
}

/* Достигнутое состояние: заливка, как исходная btn-success у действий результата. */
.dbdev-ui-button--success {
    --dbdev-ui-button-fg: var(--dbdev-ui-surface, #fff);
    --dbdev-ui-button-bg: var(--dbdev-ui-success, #12b76a);
    --dbdev-ui-button-bd: var(--dbdev-ui-success, #12b76a);
    --dbdev-ui-button-ring: var(--dbdev-ui-success-border, #a6f4c5);
}

.dbdev-ui-button--success:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled),
.dbdev-ui-button--success:focus-visible {
    --dbdev-ui-button-bg: var(--dbdev-ui-success-text, #237840);
    --dbdev-ui-button-bd: var(--dbdev-ui-success-text, #237840);
}

/* Прозрачная кнопка: закрытие панелей и копирование. */
.dbdev-ui-button--ghost {
    --dbdev-ui-button-fg: var(--dbdev-ui-text-muted, #68737d);
    --dbdev-ui-button-bg: transparent;
    --dbdev-ui-button-bd: transparent;
}

.dbdev-ui-button--ghost:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled),
.dbdev-ui-button--ghost:focus-visible {
    --dbdev-ui-button-fg: var(--dbdev-ui-text, #252b31);
    --dbdev-ui-button-bg: var(--dbdev-ui-border-divider, #edf0f2);
    --dbdev-ui-button-bd: var(--dbdev-ui-border-divider, #edf0f2);
}

/* --- Размеры ------------------------------------------------------------- */

.dbdev-ui-button--lg {
    --dbdev-ui-button-size: 44px;
    padding: 11px 18px;
    font-size: 15px;
    line-height: 20px;
}

.dbdev-ui-button--sm {
    --dbdev-ui-button-size: 34px;
    gap: 6px;
    padding: 7px 10px;
    font-size: 12px;
    line-height: 16px;
}

.dbdev-ui-button--xs {
    --dbdev-ui-button-size: 26px;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--dbdev-ui-radius-xs, 6px);
    font-size: 13px;
    line-height: 12px;
}

/* --- Форма --------------------------------------------------------------- */

/* Квадратная кнопка без подписи. Ширина следует за размером, подпись — в aria-label. */
.dbdev-ui-button--icon {
    width: var(--dbdev-ui-button-size);
    padding: 0;
}

/* --- Состояния ----------------------------------------------------------- */

.dbdev-ui-button:hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    --dbdev-ui-button-shadow: 0 2px 7px var(--dbdev-ui-button-ring);
}

.dbdev-ui-button:active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    transform: translateY(1px);
}

/* Кольцо живёт в отдельной тени, поэтому появляется и под курсором, и у ссылки
   с aria-disabled, которая остаётся в порядке обхода клавиатурой. */
.dbdev-ui-button:focus-visible {
    --dbdev-ui-button-ring-shadow: 0 0 0 3px var(--dbdev-ui-button-ring);
    outline: none;
}

/* Раскрытая связанная панель: состояние держится и без наведения. */
.dbdev-ui-button.is-active {
    --dbdev-ui-button-fg: var(--dbdev-ui-accent-hover, #bd2f09);
    --dbdev-ui-button-bg: var(--dbdev-ui-accent-soft, rgba(230, 62, 17, .07));
    --dbdev-ui-button-bd: var(--dbdev-ui-accent-border, rgba(230, 62, 17, .28));
}

.dbdev-ui-button:disabled,
.dbdev-ui-button[aria-disabled="true"],
.dbdev-ui-button.is-disabled {
    --dbdev-ui-button-shadow: 0 0 0 0 transparent;
    cursor: default;
    opacity: .6;
    transform: none;
}

/* Выполняющийся запрос. Клики блокируются, кнопка остаётся в фокусируемом состоянии. */
.dbdev-ui-button.is-loading {
    cursor: wait;
    opacity: .75;
    pointer-events: none;
}

.dbdev-ui-button.is-loading::after {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: '';
    animation: dbdev-ui-button-spin .6s linear infinite;
}

@keyframes dbdev-ui-button-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dbdev-ui-button {
        transition: none;
    }

    .dbdev-ui-button:active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
        transform: none;
    }

    .dbdev-ui-button.is-loading::after {
        opacity: .6;
        animation: none;
    }
}