.alert_q3k8d {
    color: var(--sp-color-text-base);
    border-color: transparent;
    border-radius: var(--sp-theme-radius-xlarge);
    background-color: var(--sp-color-bg-standout-base);
}
.title_lR6tH {
    color: var(--sp-color-text-base);
}
.details_KGSjO {
    color: var(--sp-color-text-muted);
}
.alert_q3k8d.mainBg_Wb45V {
    background-color: var(--sp-color-bg-base);
    border: 1px solid var(--sp-color-border-base);
}

.mainBg_Wb45V.info_Ulw7q .title_lR6tH,
.mainBg_Wb45V.info_Ulw7q .iconColor_RR8-I {
    /* if there's a `mainBackground` prop set primary color is used for title */
    color: var(--color-text-primary);
}

.info_Ulw7q {
    background-color: var(--sp-color-bg-alert-info);
}
.info_Ulw7q .iconColor_RR8-I {
    color: var(--sp-color-text-primary);
}

.success_u5BQT {
    background-color: var(--sp-color-bg-alert-success);
}
.success_u5BQT .iconColor_RR8-I {
    color: var(--sp-color-text-success);
}

/* The `warning` kind will be removed in the new Spine Alert 
 * so we don't have a color for it in spine tokens.
 */
.warning_zxFFZ .iconColor_RR8-I {
    color: var(--color-warning-main);
}

.danger_VigyZ {
    background-color: var(--sp-color-bg-alert-danger);
}
.danger_VigyZ .iconColor_RR8-I,
.mainBg_Wb45V.danger_VigyZ .title_lR6tH {
    color: var(--sp-color-text-danger-default);
}

.merge_e72vD {
    background-color: var(--sp-color-bg-alert-merge);
}
.merge_e72vD .iconColor_RR8-I {
    color: var(--sp-color-text-merge);
}

.upgrade_9UtYW {
    background-color: var(--sp-color-bg-alert-upgrade);
}
.upgrade_9UtYW .iconColor_RR8-I {
    color: var(--sp-color-text-upgrade);
}