/*Cookiemodule start*/
.text-primary {
    color: var(--brand-600);
}

.bg-primary {
    background: var(--brand-600);
}

.btn-primary {
    color: var(--in-brand-600);
}
/*Cookiemodule end*/

/*Custom header colors start.
    INFO: Domea wants their header to essentially use inverted colors of everywhere else. TaskID: BEX-5275
    This resolves that, by partially just setting the colors directly on the header-nav. But also overriding some component library color variables
*/
.header-nav {
    background-color: var(--brand-600);

    lib-link[tone="neutral-strong"] {
        --bx-color-slate-900: var(--color-white);
    }

    lib-button[tone="neutral"][type="tertiary"] button {
        color: var(--color-white);
    }

    bex-user-button button,
    lib-button[tone="brand"][type="primary"] button {
        color: var(--color-brand-600);
        background-color: var(--color-white);

        &:hover {
            color: var(--color-brand-600);
            background-color: var(--color-brand-50);
        }

        &:active {
            background-color: var(--color-brand-100);
        }
    }

    bex-user-button lib-flyout-menu > button {
        --bx-color-brand-600: var(--color-white);
        --bx-color-in-brand-600: var(--color-brand-600);

        background-color: var(--color-brand-600);
        border-top-right-radius: calc(infinity * 1px);
        border-bottom-right-radius: calc(infinity * 1px);

        &:hover,
        &:active {
            background-color: var(--color-brand-600);
        }

        span:hover {
            background-color: var(--color-brand-50);
        }

        span:active {
            background-color: var(--color-brand-100);
        }
    }

    #burger-toggle-button {
        i {
            color: var(--color-white);
        }
    }
}

/*Custom header colors end*/