/*--------------------------------------------------------------
# SJT Bootstrap overrides
--------------------------------------------------------------*/
.btn-outline-yellow {
    --bs-btn-color: #825c11;
    --bs-btn-border-color: #825c11;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffb727;
    --bs-btn-hover-border-color: #ffb727;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffb727;
    --bs-btn-active-border-color: #825c11;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #825c11;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #825c11;
    --bs-gradient: none;
}

:root {
    --sjt-yellow-bg: #ffb727;
    --sjt-gold-border: #825c11;
    --sjt-gold-colour: var(--sjt-gold-border);
    --sjt-focus-shadow-rgb: 255, 193, 7;
    --sjt-focus-shadow-rgba: var(--sjt-focus-shadow-rgb), .25;
    --sjt-hover-bg: #ffc85a;
}

.btn-yellow {
    --bs-btn-color: var(--sjt-gold-colour);
    --bs-btn-border-color: var(--sjt-gold-border);
    --bs-btn-bg: var(--sjt-yellow-bg);
    --bs-btn-hover-bg: var(--sjt-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--sjt-focus-shadow-rgb);
}

.form-control {
    &:focus {
        border-color: var(--sjt-yellow-bg);
        box-shadow: 0 0 0 .25rem rgba(var(--sjt-focus-shadow-rgba));
    }
}

.form-check-input-yellow {
    &:checked {
        background-color: var(--sjt-yellow-bg);
        border-color: var(--sjt-gold-border);
    }

    &:focus {
        border-color: #ffb727;
        box-shadow: 0 0 0 .25rem rgba(var(--sjt-focus-shadow-rgba));
    }
}