alert.module.css

.container {
    border-style: solid;
    border-width: 1px;
    color: var(--reactist-content-primary);
    padding: var(--reactist-spacing-small);
    /* this is to make sure it always has the same minimum height, whether it has a close button or not */
    min-height: calc(2 * var(--reactist-spacing-small) + var(--reactist-button-small-height) + 2px);
}

.tone-info {
    background-color: var(--reactist-alert-tone-info-background);
    border-color: var(--reactist-alert-tone-info-border);
}
.tone-info .icon {
    color: var(--reactist-alert-tone-info-icon);
}

.tone-positive {
    background-color: var(--reactist-alert-tone-positive-background);
    border-color: var(--reactist-alert-tone-positive-border);
}
.tone-positive .icon {
    color: var(--reactist-alert-tone-positive-icon);
}

.tone-caution {
    background-color: var(--reactist-alert-tone-caution-background);
    border-color: var(--reactist-alert-tone-caution-border);
}
.tone-caution .icon {
    color: var(--reactist-alert-tone-caution-icon);
}

.tone-critical {
    background-color: var(--reactist-alert-tone-critical-background);
    border-color: var(--reactist-alert-tone-critical-border);
}
.tone-critical .icon {
    color: var(--reactist-alert-tone-critical-icon);
}