/**
 * by LeviMoore - mail@levimoore.dev
 * date: 03/2021
 *
 * This is a simple example of a way to override bootstrap color without having to recompile.
 */

:root {
    --primary: #f74487;
    --primary-dark: #d00c54;
    --primary-shadow: rgb(206 86 127 / 57%);
}

/* page navigation */
.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}
.page-link {
    color: var(--primary);
}
.page-link:hover {
    color: var(--primary-dark);
}

/* dropdown */
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary);
}

/* normal buttons */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-primary.focus, .btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 0.2rem var(--primary-shadow);
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-shadow);
}

/* outline buttons */
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-shadow);
}
.btn-outline-primary.focus, .btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--primary-shadow);
}

/* select */
.custom-select:focus {
    border-color: var(--primary-shadow);
    box-shadow: 0 0 0 0.2rem var(--primary-shadow);
}

/* form-control */
.form-control:focus {
    border-color: var(--primary-shadow);
    box-shadow: 0 0 0 0.2rem var(--primary-shadow);
}