/*
 * Bootstrap components compile some colours as literals instead of reading
 * --bs-primary, so the accent has to be set on them one by one.
 */
.btn {
    --bs-btn-font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--ac-accent);
    --bs-btn-border-color: var(--ac-accent);
    --bs-btn-hover-bg: var(--ac-accent-hover);
    --bs-btn-hover-border-color: var(--ac-accent-hover);
    --bs-btn-active-bg: var(--ac-accent-active);
    --bs-btn-active-border-color: var(--ac-accent-active);
    --bs-btn-disabled-bg: var(--ac-accent);
    --bs-btn-disabled-border-color: var(--ac-accent);
    --bs-btn-focus-shadow-rgb: var(--ac-accent-rgb);
}

.btn-secondary {
    --bs-btn-bg: var(--ac-btn-secondary);
    --bs-btn-border-color: var(--ac-btn-secondary);
    --bs-btn-hover-bg: var(--ac-btn-secondary-hover);
    --bs-btn-hover-border-color: var(--ac-btn-secondary-hover);
    --bs-btn-active-bg: var(--ac-btn-secondary-hover);
    --bs-btn-active-border-color: var(--ac-btn-secondary-hover);
    --bs-btn-disabled-bg: var(--ac-btn-secondary);
    --bs-btn-disabled-border-color: var(--ac-btn-secondary);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-secondary-rgb);
}

.btn-success {
    --bs-btn-bg: var(--ac-btn-success);
    --bs-btn-border-color: var(--ac-btn-success);
    --bs-btn-hover-bg: var(--ac-btn-success-hover);
    --bs-btn-hover-border-color: var(--ac-btn-success-hover);
    --bs-btn-active-bg: var(--ac-btn-success-active);
    --bs-btn-active-border-color: var(--ac-btn-success-active);
    --bs-btn-disabled-bg: var(--ac-btn-success);
    --bs-btn-disabled-border-color: var(--ac-btn-success);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-success-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--ac-btn-danger);
    --bs-btn-border-color: var(--ac-btn-danger);
    --bs-btn-hover-bg: var(--ac-btn-danger-hover);
    --bs-btn-hover-border-color: var(--ac-btn-danger-hover);
    --bs-btn-active-bg: var(--ac-btn-danger-active);
    --bs-btn-active-border-color: var(--ac-btn-danger-active);
    --bs-btn-disabled-bg: var(--ac-btn-danger);
    --bs-btn-disabled-border-color: var(--ac-btn-danger);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-danger-rgb);
}

.btn-warning {
    --bs-btn-color: var(--ac-btn-warning-text);
    --bs-btn-bg: var(--ac-btn-warning);
    --bs-btn-border-color: var(--ac-btn-warning);
    --bs-btn-hover-color: var(--ac-btn-warning-text);
    --bs-btn-hover-bg: var(--ac-btn-warning-hover);
    --bs-btn-hover-border-color: var(--ac-btn-warning-hover);
    --bs-btn-active-color: var(--ac-btn-warning-text);
    --bs-btn-active-bg: var(--ac-btn-warning-hover);
    --bs-btn-active-border-color: var(--ac-btn-warning-hover);
    --bs-btn-disabled-color: var(--ac-btn-warning-text);
    --bs-btn-disabled-bg: var(--ac-btn-warning);
    --bs-btn-disabled-border-color: var(--ac-btn-warning);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-warning-rgb);
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ac-btn-info);
    --bs-btn-border-color: var(--ac-btn-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ac-btn-info-hover);
    --bs-btn-hover-border-color: var(--ac-btn-info-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ac-btn-info-hover);
    --bs-btn-active-border-color: var(--ac-btn-info-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ac-btn-info);
    --bs-btn-disabled-border-color: var(--ac-btn-info);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-info-rgb);
}

.btn-light {
    --bs-btn-color: var(--ac-text);
    --bs-btn-bg: var(--ac-surface-2);
    --bs-btn-border-color: var(--ac-border);
    --bs-btn-hover-color: var(--ac-text);
    --bs-btn-hover-bg: #EDF0F4;
    --bs-btn-hover-border-color: var(--ac-border-strong);
    --bs-btn-active-color: var(--ac-text);
    --bs-btn-active-bg: #E4E8EE;
    --bs-btn-active-border-color: var(--ac-border-strong);
    --bs-btn-disabled-color: var(--ac-text-3);
    --bs-btn-disabled-bg: var(--ac-surface-2);
    --bs-btn-disabled-border-color: var(--ac-border);
    --bs-btn-focus-shadow-rgb: var(--ac-accent-rgb);
}

.btn-dark {
    --bs-btn-bg: var(--ac-shell);
    --bs-btn-border-color: var(--ac-shell);
    --bs-btn-hover-bg: var(--ac-shell-2);
    --bs-btn-hover-border-color: var(--ac-shell-2);
    --bs-btn-active-bg: var(--ac-shell-2);
    --bs-btn-active-border-color: var(--ac-shell-2);
    --bs-btn-disabled-bg: var(--ac-shell);
    --bs-btn-disabled-border-color: var(--ac-shell);
}

/*
 * Outline buttons: a softened border at rest, filled with the colour on
 * hover and when checked (toggle groups rely on the filled active state).
 */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark {
    --bs-btn-border-color: color-mix(in srgb, var(--btn-tone) 42%, #fff);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-tone);
    --bs-btn-hover-border-color: var(--btn-tone);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-tone);
    --bs-btn-active-border-color: var(--btn-tone);
    --bs-btn-disabled-color: var(--btn-tone);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--btn-tone) 42%, #fff);
    --bs-btn-color: var(--btn-tone);
}

.btn-outline-primary {
    --btn-tone: var(--ac-accent);
    --bs-btn-focus-shadow-rgb: var(--ac-accent-rgb);
}
.btn-outline-success {
    --btn-tone: var(--ac-btn-success);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-success-rgb);
}
.btn-outline-danger {
    --btn-tone: var(--ac-btn-danger);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-danger-rgb);
}
.btn-outline-info {
    --btn-tone: var(--ac-btn-info);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-info-rgb);
}
.btn-outline-dark {
    --btn-tone: var(--ac-shell);
    --bs-btn-color: var(--ac-text);
}
.btn-outline-warning {
    --btn-tone: var(--ac-btn-warning);
    --bs-btn-color: #8F6200;
    --bs-btn-hover-color: var(--ac-btn-warning-text);
    --bs-btn-active-color: var(--ac-btn-warning-text);
    --bs-btn-disabled-color: #8F6200;
    --bs-btn-focus-shadow-rgb: var(--ac-btn-warning-rgb);
}

.btn-outline-secondary {
    --btn-tone: var(--ac-btn-secondary);
    --bs-btn-color: var(--ac-text-2);
    --bs-btn-border-color: var(--ac-border-strong);
    --bs-btn-hover-color: var(--ac-text);
    --bs-btn-hover-bg: var(--ac-surface-2);
    --bs-btn-hover-border-color: #B3BDCA;
    --bs-btn-disabled-color: var(--ac-text-3);
    --bs-btn-disabled-border-color: var(--ac-border);
    --bs-btn-focus-shadow-rgb: var(--ac-btn-secondary-rgb);
}

.btn-link {
    --bs-btn-color: var(--ac-accent-text);
    --bs-btn-hover-color: var(--ac-accent-active);
    --bs-btn-active-color: var(--ac-accent-active);
}

.form-control:focus,
.form-select:focus {
    border-color: #8FAEE8;
    box-shadow: 0 0 0 .25rem rgba(var(--ac-accent-rgb), .2);
}

.form-check-input:checked {
    background-color: var(--ac-accent);
    border-color: var(--ac-accent);
}
.form-check-input:focus {
    border-color: #8FAEE8;
    box-shadow: 0 0 0 .25rem rgba(var(--ac-accent-rgb), .2);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ac-accent);
}

.pagination {
    --bs-pagination-color: var(--ac-accent-text);
    --bs-pagination-hover-color: var(--ac-accent-active);
    --bs-pagination-focus-color: var(--ac-accent-active);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--ac-accent-rgb), .2);
    --bs-pagination-active-bg: var(--ac-accent);
    --bs-pagination-active-border-color: var(--ac-accent);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--ac-border);
    --bs-dropdown-link-active-bg: var(--ac-accent);
    --bs-dropdown-box-shadow: var(--ac-shadow-pop);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.list-group {
    --bs-list-group-active-bg: var(--ac-accent);
    --bs-list-group-active-border-color: var(--ac-accent);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--ac-accent);
}

.card {
    --bs-card-border-color: var(--ac-border);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--ac-accent-rgb), .2);
}

.offcanvas {
    --bs-offcanvas-box-shadow: -8px 0 24px rgba(14, 23, 38, .12);
    box-shadow: var(--bs-offcanvas-box-shadow);
}