.btn-mandarine,
.btn-outline-mandarine {
    &:focus {
        box-shadow: 0 0 0 0.2rem rgb(238, 120, 28, 0.25);
    }
}

.btn-mandarine {
    color: white;
    background-color: var(--mandarine);
    border-color: var(--mandarine);

    &:hover {
        color: white;
        background-color: #f19349;
        border-color: #f19349;
    }
}

.btn-outline-mandarine {
    color: var(--mandarine);
    border-color: var(--mandarine);

    &:hover {
        color: var(--mandarine);
        background-color: #fdf2e8;
        border-color: var(--mandarine);
    }
}

.btn-strong-blue,
.btn-outline-strong-blue {
    &:focus {
        box-shadow: 0 0 0 0.2rem rgb(34, 29, 70, 0.25);
    }
}

.btn-strong-blue {
    color: white;
    background-color: var(--strong-blue);
    border-color: var(--strong-blue);

    &:hover {
        color: white;
        background-color: #4e4a6b;
        border-color: #4e4a6b;
    }
}

.btn-outline-strong-blue {
    color: var(--strong-blue);
    border-color: var(--strong-blue);

    &:hover {
        color: var(--strong-blue);
        background-color: #e9e8ed;
        border-color: var(--strong-blue);
    }
}

.btn-magnolia {
    color: var(--strong-blue);
    background-color: var(--magnolia);
    border-color: var(--magnolia);

    &:hover {
        color: var(--strong-blue);
        background-color: #e5e2f3;
        border-color: #e5e2f3;
    }

    &:focus {
        box-shadow: 0 0 0 0.2rem rgb(236, 234, 245, 0.25);
    }
}