/*
 * Stock buttons of site CSN, in the brand colours of the Figma design "CSN - Review": primary CSN Blue (#1739e5), secondary white with a
 * Grey (#e6eef2) border and Midnight Core (#10103e) text, call to action Blue 2 (#79caf2), destructive Error (#bf1000), 8px corners.
 * The pages draw their own buttons as designed (figma-*.css); this file covers the Bootstrap / FF buttons they do not restyle
 * (dialogs, confirmations, table actions) that would otherwise show the Bootstrap blue/grey or the FF theme purple (#050093).
 * Loaded after ff/app.css and the page stylesheets, so it only needs the weight of a single class. The theme tokens
 * (--csn-button-*, set by frontend/partials/csn-theme when a site changes them) still win over the brand fallbacks.
 */

/* ---- Primary ---- */
.btn-primary {
    --bs-btn-color: var(--csn-button-primary-fg-default, #fff);
    --bs-btn-bg: var(--csn-button-primary-bg-default, #1739e5);
    --bs-btn-border-color: var(--csn-button-primary-bg-default, #1739e5);
    --bs-btn-hover-color: var(--csn-button-primary-fg-default, #fff);
    --bs-btn-hover-bg: var(--csn-button-primary-bg-hover, color-mix(in srgb, var(--csn-button-primary-bg-default, #1739e5) 85%, #000));
    --bs-btn-hover-border-color: var(--csn-button-primary-bg-hover, color-mix(in srgb, var(--csn-button-primary-bg-default, #1739e5) 85%, #000));
    --bs-btn-active-color: var(--csn-button-primary-fg-default, #fff);
    --bs-btn-active-bg: var(--csn-button-primary-bg-active, color-mix(in srgb, var(--csn-button-primary-bg-default, #1739e5) 80%, #000));
    --bs-btn-active-border-color: var(--csn-button-primary-bg-active, color-mix(in srgb, var(--csn-button-primary-bg-default, #1739e5) 80%, #000));
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--csn-button-primary-bg-inactive, #1739e5);
    --bs-btn-disabled-border-color: var(--csn-button-primary-bg-inactive, #1739e5);
    border-radius: 8px;
}

.app-btn-primary {
    background: var(--csn-button-primary-bg-default, #1739e5);
    border-radius: 8px;
    color: var(--csn-button-primary-fg-default, #fff);
}

.app-btn-primary:hover,
.app-btn-primary:active {
    background: var(--csn-button-primary-bg-hover, color-mix(in srgb, var(--csn-button-primary-bg-default, #1739e5) 85%, #000));
    border-color: transparent;
    color: var(--csn-button-primary-fg-default, #fff);
}

.btn-outline-primary {
    --bs-btn-color: #1739e5;
    --bs-btn-border-color: #1739e5;
    --bs-btn-hover-bg: #1739e5;
    --bs-btn-hover-border-color: #1739e5;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, #1739e5 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, #1739e5 80%, #000);
    --bs-btn-active-color: #fff;
    border-radius: 8px;
}

/* ---- Secondary ---- */
.btn-secondary {
    --bs-btn-color: #10103e;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #e6eef2;
    --bs-btn-hover-color: #10103e;
    --bs-btn-hover-bg: #f1f6f8;
    --bs-btn-hover-border-color: #e6eef2;
    --bs-btn-active-color: #10103e;
    --bs-btn-active-bg: #e6eef2;
    --bs-btn-active-border-color: #e6eef2;
    --bs-btn-disabled-color: #adbac0;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #e6eef2;
    border: 1px solid var(--bs-btn-border-color);
    border-radius: 8px;
}

.app-btn-secondary {
    background: #fff;
    border: 1px solid #e6eef2;
    border-radius: 8px;
    color: #10103e;
}

.app-btn-secondary:hover,
.app-btn-secondary:active {
    background: #f1f6f8;
    border: 1px solid #e6eef2;
    color: #10103e;
}

/* ---- Call to action ---- */
.app-btn-action,
.btn-info {
    background: #79caf2;
    border: 0;
    border-radius: 8px;
    color: #10103e;
}

.app-btn-action:hover,
.app-btn-action:active,
.btn-info:hover,
.btn-info:active {
    background: color-mix(in srgb, #79caf2 85%, #000);
    border: 0;
    color: #10103e;
}

/* ---- Destructive ---- */
.btn-danger {
    --bs-btn-color: var(--csn-button-danger-fg-default, #fff);
    --bs-btn-bg: var(--csn-button-danger-bg-default, #bf1000);
    --bs-btn-border-color: var(--csn-button-danger-bg-default, #bf1000);
    --bs-btn-hover-color: var(--csn-button-danger-fg-default, #fff);
    --bs-btn-hover-bg: var(--csn-button-danger-bg-hover, color-mix(in srgb, var(--csn-button-danger-bg-default, #bf1000) 85%, #000));
    --bs-btn-hover-border-color: var(--csn-button-danger-bg-hover, color-mix(in srgb, var(--csn-button-danger-bg-default, #bf1000) 85%, #000));
    --bs-btn-active-bg: var(--csn-button-danger-bg-active, color-mix(in srgb, var(--csn-button-danger-bg-default, #bf1000) 80%, #000));
    --bs-btn-active-border-color: var(--csn-button-danger-bg-active, color-mix(in srgb, var(--csn-button-danger-bg-default, #bf1000) 80%, #000));
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    border-radius: 8px;
}

.btn-danger:hover,
.btn-danger:active {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-outline-danger {
    --bs-btn-color: #bf1000;
    --bs-btn-border-color: #bf1000;
    --bs-btn-hover-bg: #bf1000;
    --bs-btn-hover-border-color: #bf1000;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, #bf1000 80%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, #bf1000 80%, #000);
    --bs-btn-active-color: #fff;
    border-radius: 8px;
}

/* Round icon buttons stay round. */
.btn.btn-circle {
    border-radius: 50%;
}

/* Grey circle and outline-secondary icon buttons (refresh, captcha): brand hover instead of the FF theme purple / Bootstrap grey. */
.btn-gray:hover {
    background-color: #adbac0;
    border-color: var(--csn-primary, #1739e5);
}

.btn-outline-secondary {
    --bs-btn-color: #7a8799;
    --bs-btn-border-color: #e6eef2;
    --bs-btn-hover-color: #10103e;
    --bs-btn-hover-bg: #f1f6f8;
    --bs-btn-hover-border-color: #e6eef2;
    --bs-btn-active-color: #10103e;
    --bs-btn-active-bg: #e6eef2;
    --bs-btn-active-border-color: #e6eef2;
    border-radius: 8px;
}

/* Release note / announcement confirmation (QMS-15060): ff/app.css paints every ticked checkbox with --colour-border-default
   (input[type=checkbox]:checked, which beats .form-check-input:checked), the pale theme grey; use the CSN brand blue like the dialogs'
   checkboxes. The white tick is the ::before of that rule, or Bootstrap's background image on the pages that load ff/auth/app.css. */
#ffReleaseNoteModal .form-check-input:checked {
    background-color: var(--csn-primary, #1739e5);
    border-color: var(--csn-primary, #1739e5);
}