/**
 * Color variants
 */

.header {
    &.-primary {
        --header--background: var(--header--primary--background, var(--color-primary));
        --header--color: var(--header--primary--color, var(--contrast-text-color-primary));
    }

    &.-light {
        --header--background: var(--header--light--background, var(--color-light));
        --header--color: var(--header--light--color, var(--contrast-text-color-light));
    }

    &.-dark {
        --header--background: var(--header--dark--background, var(--color-dark));
        --header--color: var(--header--dark--color, var(--contrast-text-color-dark));
    }
}