aSkelly/scss/component/_alert.scss

@use '../utilities/main_utilities' as *;
@use "sass:color";

// Alerts
.alert{
    background: $color-secondary-accent;
    border-left: 4px solid $color-secondary;
    border-right: 4px solid $color-secondary;
    padding: .1rem .8rem;
    margin-bottom:.5rem;

    @include color-scheme(dark) {
        color: $color-secondary-accent--dark;
        border-color: $color-secondary--dark;
    }
}
.alert--error{
    background: desaturate($alert-color--error, 40);
    border-color: $alert-color--error;

    @include color-scheme(dark) {
        color: $color-secondary-accent;
    }
}
.alert--warning{
    background: desaturate($alert-color--warning, 40);
    border-color: $alert-color--warning;
    
    @include color-scheme(dark) {
        color: $color-secondary-accent;
    }
}
.alert--success{
    background: desaturate($alert-color--success, 40);
    border-color: $alert-color--success;
    
    @include color-scheme(dark) {
        color: $color-secondary-accent;
    }
}