/* Bootstrap-style semantic recipes for Radzen flat alerts. */
.rz-alert.rz-variant-flat.rz-primary {
    --olis-alert-bg: var(--olis-blue-100);
    --olis-alert-border: var(--olis-blue-200);
    --olis-alert-fg: var(--olis-blue-700);
}

.rz-alert.rz-variant-flat.rz-secondary {
    --olis-alert-bg: var(--olis-slate-100);
    --olis-alert-border: var(--olis-slate-200);
    --olis-alert-fg: var(--olis-slate-700);
}

.rz-alert.rz-variant-flat.rz-light {
    --olis-alert-bg: white;
    --olis-alert-border: var(--olis-slate-200);
    --olis-alert-fg: var(--olis-slate-700);
}

.rz-alert.rz-variant-flat.rz-base {
    --olis-alert-bg: var(--olis-slate-50);
    --olis-alert-border: var(--olis-slate-200);
    --olis-alert-fg: var(--olis-slate-700);
}

.rz-alert.rz-variant-flat.rz-dark {
    --olis-alert-bg: var(--olis-slate-200);
    --olis-alert-border: var(--olis-slate-500);
    --olis-alert-fg: var(--olis-slate-800);
}

.rz-alert.rz-variant-flat.rz-success {
    --olis-alert-bg: var(--olis-green-100);
    --olis-alert-border: var(--olis-green-200);
    --olis-alert-fg: var(--olis-green-700);
}

.rz-alert.rz-variant-flat.rz-danger {
    --olis-alert-bg: var(--olis-red-100);
    --olis-alert-border: var(--olis-red-200);
    --olis-alert-fg: var(--olis-red-700);
}

.rz-alert.rz-variant-flat.rz-warning {
    --olis-alert-bg: var(--olis-amber-50);
    --olis-alert-border: var(--olis-amber-200);
    --olis-alert-fg: var(--olis-amber-700);
}

.rz-alert.rz-variant-flat.rz-info {
    --olis-alert-bg: var(--olis-sky-100);
    --olis-alert-border: var(--olis-sky-200);
    --olis-alert-fg: var(--olis-sky-700);
}

.rz-alert.rz-variant-flat:is(.rz-primary, .rz-secondary, .rz-light, .rz-base, .rz-dark, .rz-success, .rz-danger, .rz-warning, .rz-info) {
    --rz-alert-background-color: var(--olis-alert-bg);
    --rz-alert-color: var(--olis-alert-fg);
    --rz-alert-title-color: var(--olis-alert-fg);
    --rz-alert-icon-color: var(--olis-alert-fg);
    border: 1px solid var(--olis-alert-border);
    box-shadow: none;
}

.rz-alert.rz-variant-flat a {
    color: inherit;
    font-weight: var(--rz-text-button-font-weight, 600);
}

.rz-alert.rz-variant-flat > .rz-button.rz-variant-text {
    color: var(--olis-alert-fg);
    background-color: var(--olis-alert-bg);
}