﻿:root {
    /* HEX */
    --rh-red: #B81137;
    --rh-dark-blue: #003A50;
    --rh-light-blue: #99BEC9;
    /* RGBA */
    --rh-red-rgba: rgba(184, 17, 55, 1);
    --rh-dark-blue-rgba: rgba(0, 58, 80, 1);
    --rh-light-blue-rgba: rgba(153, 190, 201, 1);
}

/* ================ RED ================ */

.btn-rh-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #B81137;
    --bs-btn-border-color: #B81137;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #A22737;
    --bs-btn-focus-shadow-rgb: 224, 68, 88;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #A22737;
    --bs-btn-active-border-color: #972433;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #B81137;
    --bs-btn-disabled-border-color: #B81137;
}

.btn-rh-primary {
    background-color: var(--bs-btn-bg);
}

    .btn-rh-primary:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn-rh-primary:active {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
    }

    .btn-rh-primary:focus {
        box-shadow: 0 0 0px 2px rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn-rh-primary:active:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

    .btn-rh-primary:focus-visible {
        background-color: #B52B3D;
        border-color: #A22737;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

.bg-rh-red {
    background-color: var(--rh-red);
}

/* ================ DARK BLUE ================ */
.btn-rh-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #003A50;
    --bs-btn-border-color: #003A50;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0A2F4C;
    --bs-btn-hover-border-color: #092A45;
    --bs-btn-focus-shadow-rgb: 17, 80, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #092A45;
    --bs-btn-active-border-color: #08263F;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #003A50;
    --bs-btn-disabled-border-color: #003A50;
}

.btn-rh-dark {
    background-color: var(--bs-btn-bg);
}

    .btn-rh-dark:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn-rh-dark:active {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
    }

    .btn-rh-dark:focus {
        box-shadow: 0 0 0px 2px rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn-rh-dark:active:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

    .btn-rh-dark:focus-visible {
        background-color: #B52B3D;
        border-color: #A22737;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

.bg-rh-dark {
    background-color: var(--rh-dark-blue);
}

/* ================ LIGHT BLUE ================ */
.btn-rh-light {
    --bs-btn-color: #fff;
    --bs-btn-bg: #99BEC9;
    --bs-btn-border-color: #99BEC9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2497C9;
    --bs-btn-hover-border-color: #218DBB;
    --bs-btn-focus-shadow-rgb: 76, 184, 232;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #218DBB;
    --bs-btn-active-border-color: #1F85AF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #99BEC9;
    --bs-btn-disabled-border-color: #99BEC9;
}

.btn-rh-light {
    background-color: var(--bs-btn-bg);
}

    .btn-rh-light:hover {
        background-color: var(--bs-btn-hover-bg);
        border-color: var(--bs-btn-hover-border-color);
    }

    .btn-rh-light:active {
        background-color: var(--bs-btn-active-bg);
        border-color: var(--bs-btn-active-border-color);
    }

    .btn-rh-light:focus {
        box-shadow: 0 0 0px 2px rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
    }

    .btn-rh-light:active:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }

    .btn-rh-light:focus-visible {
        background-color: #B52B3D;
        border-color: #A22737;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb),.5);
    }
