:root {
    --lpx-primary: var(--branding-primary);

    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--lpx-primary);
        --bs-btn-border-color: var(--lpx-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-btn-focus-shadow-rgb: 83, 117, 255;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: color-mix(in srgb, var(--lpx-primary) 65%, white);
        --bs-btn-disabled-border-color: color-mix(in srgb, var(--lpx-primary) 65%, white);
    }

    .btn-outline-primary {
        --bs-btn-color: var(--lpx-primary);
        --bs-btn-border-color: var(--lpx-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-btn-focus-shadow-rgb: 53, 93, 255;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: color-mix(in srgb, var(--lpx-primary) 65%, white);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: color-mix(in srgb, var(--lpx-primary) 65%, white);
        --bs-gradient: none;
    }

    .btn-secondary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--lpx-secondary);
        --bs-btn-border-color: var(--lpx-secondary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: color-mix(in srgb, var(--lpx-secondary) 65%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--lpx-secondary) 65%, black);
        --bs-btn-focus-shadow-rgb: 83, 117, 255;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: color-mix(in srgb, var(--lpx-secondary) 65%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--lpx-secondary) 65%, black);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: color-mix(in srgb, var(--lpx-secondary) 65%, white);
        --bs-btn-disabled-border-color: color-mix(in srgb, var(--lpx-secondary) 65%, white);
    }

    .nav-tabs .nav-item .nav-link:hover {
        border-bottom: 3px solid rgba(50, 81, 104, 0.08);
    }

    .nav-tabs .nav-item .nav-link.active {
        border-bottom: 3px solid var(--lpx-primary);
    }

    .nav-tabs {
        --bs-nav-tabs-border-width: 0;
        --bs-nav-tabs-border-color: #e8eef3;
        --bs-nav-tabs-border-radius: var(--bs-border-radius);
        --bs-nav-tabs-link-hover-border-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-nav-tabs-link-active-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
        --bs-nav-tabs-link-active-bg: unset;
        --bs-nav-tabs-link-active-border-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
        border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
    }

    .form-check-input:checked {
        border-color: var(--lpx-primary) !important;
        background-color: var(--lpx-primary) !important;
    }

    .dropdown-item.active, .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: color-mix(in srgb, var(--lpx-primary) 65%, black);
    }

    select.form-select option:checked, select.form-select option:focus, select.form-select option:active {
        background: color-mix(in srgb, var(--lpx-primary) 65%, black) !important;
        color: #fff !important;
        border-radius: 0.25rem !important;
    }

    .lpx-login-bg {
        background-image: none !important;
        background: var(--lpx-theme-light-bg);
    }

    .nav-pills {
        --bs-nav-pills-border-radius: var(--bs-border-radius);
        --bs-nav-pills-link-active-color: #fff;
        --bs-nav-pills-link-active-bg: var(--lpx-primary);
    }

    .pagination .page-item.active .page-link {
        color: #fff !important;
        border-radius: 0.5rem;
        background-color: var(--lpx-primary) !important;
    }
}