/* Zachte statustint voor vlakken met gewone (donkere) tekst. De --mud-palette-*-lighten-kleuren zijn
   middentonen voor knoppen met witte tekst en halen met donkere tekst geen AA. Bewaakt door
   StatustintBroncontroleTests. */
:root {
    --np-statustint-primary: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --np-statustint-secondary: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    --np-statustint-tertiary: color-mix(in srgb, var(--mud-palette-tertiary) 12%, transparent);
    --np-statustint-info: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    --np-statustint-success: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    --np-statustint-warning: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    --np-statustint-error: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    --np-statustint-dark: color-mix(in srgb, var(--mud-palette-dark) 12%, transparent);
}

.np-statustint-primary { background-color: var(--np-statustint-primary) !important; }
.np-statustint-secondary { background-color: var(--np-statustint-secondary) !important; }
.np-statustint-tertiary { background-color: var(--np-statustint-tertiary) !important; }
.np-statustint-info { background-color: var(--np-statustint-info) !important; }
.np-statustint-success { background-color: var(--np-statustint-success) !important; }
.np-statustint-warning { background-color: var(--np-statustint-warning) !important; }
.np-statustint-error { background-color: var(--np-statustint-error) !important; }
.np-statustint-dark { background-color: var(--np-statustint-dark) !important; }