/* ============================================================
   LIGA360 UI KIT — Buttons
   Source: Figma "❖ UI LIBRARY — v1.4" → Buttons sheet (node 11211:18210)
   https://www.figma.com/design/fOisEfYBh4z6VbkY6sOmSn/?node-id=11211-18210

   Naming:  .uiKit--button                       (base = primary · solid)
            .uiKit--button--{type}--{variant}     (colour theme)
            .uiKit--button--40                    (size Large — the only one used)
            .uiKit--button--icon                  (icon-only, square)

   Варіанти тут лише ті, що є в розмітці сайту: primary · solid (база),
   primary · outline і danger · outline. Решта кіту з Figma (transparent,
   ghost, accent, alternative, розміри 48/32/24, стани .is-*) ніде не
   використовувалась і прибрана — повернути можна з того ж вузла Figma,
   описавши варіант так само, через слоти нижче.

   Кольори — токени ДС (tokens.generated.css, --btn-bg-* / --text-*), а не
   hex: варіант лише призначає слоти --uiKit-btn-*, а стани (hover / click /
   disabled) їх споживають, тож колір живе в одному місці.
   ============================================================ */

.uiKit--button {
    /* geometry (Large 40) */
    --uiKit-btn-h: 40px;
    --uiKit-btn-pad: 24px;
    --uiKit-btn-icon: 24px;
    --uiKit-btn-gap: 8px;
    --uiKit-btn-font: 14px;
    /* colour slots — primary · solid; варіанти перевизначають потрібні */
    --uiKit-btn-bg: var(--btn-bg-primary-default);
    --uiKit-btn-border: var(--btn-bg-primary-default);
    --uiKit-btn-fg: var(--text-alternative);
    --uiKit-btn-bg-hover: var(--btn-bg-primary-hover);
    --uiKit-btn-border-hover: var(--btn-bg-primary-hover);
    --uiKit-btn-fg-hover: var(--text-alternative);
    --uiKit-btn-bg-pressed: var(--btn-bg-primary-click-pressed);
    --uiKit-btn-border-pressed: var(--btn-bg-primary-click-pressed);
    --uiKit-btn-fg-pressed: var(--text-default);
    --uiKit-btn-bg-disabled: var(--btn-bg-primary-disable-alternative);
    --uiKit-btn-border-disabled: var(--color-primary-200);
    --uiKit-btn-fg-disabled: var(--text-disabled);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uiKit-btn-gap);
    height: var(--uiKit-btn-h);
    padding: 0 var(--uiKit-btn-pad);
    border: 1px solid var(--uiKit-btn-border);
    border-radius: var(--btn-corner-corner);
    background: var(--uiKit-btn-bg);
    color: var(--uiKit-btn-fg);
    font-family: var(--liga-font-family);
    font-size: var(--uiKit-btn-font); /* H300/Button */
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.38px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    box-sizing: border-box;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.uiKit--button__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--uiKit-btn-icon);
    height: var(--uiKit-btn-icon);
    color: currentColor;
}

    .uiKit--button__icon svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
    }

.uiKit--button__label {
    display: inline-block;
}

/* ---------------- Icon-only (square) ---------------- */
.uiKit--button--icon {
    --uiKit-btn-pad: 0px;
    width: var(--uiKit-btn-h);
    padding: 0;
}

/* ============================================================
   СТАНИ (споживають слоти вище)
   ============================================================ */
.uiKit--button:hover:not(:disabled) {
    background: var(--uiKit-btn-bg-hover);
    border-color: var(--uiKit-btn-border-hover);
    color: var(--uiKit-btn-fg-hover);
}

    .uiKit--button:hover:not(:disabled) path {
        fill: var(--uiKit-btn-fg-hover);
    }

.uiKit--button:active:not(:disabled) {
    background: var(--uiKit-btn-bg-pressed);
    border-color: var(--uiKit-btn-border-pressed);
    color: var(--uiKit-btn-fg-pressed);
}

    .uiKit--button:active:not(:disabled) path {
        fill: var(--uiKit-btn-fg-pressed);
    }

/* Кнопка відправки форми, яку блокує external-form.js. */
.uiKit--button:disabled {
    background: var(--uiKit-btn-bg-disabled);
    border-color: var(--uiKit-btn-border-disabled);
    color: var(--uiKit-btn-fg-disabled);
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   ВАРІАНТИ
   .uiKit--button--primary--solid окремого правила не має: це база.
   ============================================================ */

/* primary · outline (secondary) — у CMS-кнопок попапів це і «outline»,
   і «secondary» (popupActionButton.cshtml). */
.uiKit--button--primary--outline {
    --uiKit-btn-bg: var(--btn-bg-secondary-default);
    --uiKit-btn-border: var(--btn-bg-secondary-border-default);
    --uiKit-btn-fg: var(--text-default);
    --uiKit-btn-bg-hover: var(--btn-bg-secondary-hover);
    --uiKit-btn-border-hover: var(--btn-bg-secondary-hover);
    --uiKit-btn-bg-pressed: var(--btn-bg-secondary-click-pressed);
    --uiKit-btn-border-pressed: var(--btn-bg-secondary-click-pressed);
    --uiKit-btn-fg-pressed: var(--text-alternative);
}

/* danger · outline (danger secondary) */
.uiKit--button--danger--outline {
    --uiKit-btn-bg: var(--btn-bg-danger-secondary-default);
    --uiKit-btn-border: var(--btn-bg-danger-border-default);
    --uiKit-btn-fg: var(--text-danger);
    --uiKit-btn-bg-hover: var(--btn-bg-danger-secondary-hover);
    --uiKit-btn-border-hover: var(--btn-bg-danger-secondary-hover);
    --uiKit-btn-bg-pressed: var(--btn-bg-danger-secondary-click-pressed);
    --uiKit-btn-border-pressed: var(--btn-bg-danger-secondary-click-pressed);
    --uiKit-btn-fg-pressed: var(--color-other-colors-red-900);
}