// Mixin with alert color
@mixin alert-color($color: $primary) {
    // Border style
    @include base-border-style();
    border-color: $color;

    // Check if the color is light
    @if ($color == $light) {
        border-color: generate-shade($color, 20, 'darken');
    }

    // Divider color
    .divider {
        background-color: rgba($dark, 0.7)
    }

    // Background color
    background-color: generate-shade($color, 80, 'lighten');
}

// Base alert styles
.alert {
    padding: $base-padding;
    margin: $base-margin 0;
    color: rgba($dark, 0.7);
    transition: all $base-transition-time ease-out;
    @include alert-color();

    // Alert heading style
    // I removed it so far

    // Divider styles
    .divider {
        margin: $base-margin 0;
    }

    // Alert icon styles
    .icon {
        margin-right: $base-margin;
    }
}


// Iterate over each key-val pair in the $theme-color-palette
@each $key, $val in $theme-color-palette {
    // Create alert classes for each color
    .alert-#{$key} {
        @include alert-color($val);
    }

    // Iterate over each bp_key, bp_val pair in the $breakpoints
    @each $bp_key, $bp_val in $breakpoints {
        @media (min-width: $bp_val) {
            // Generate alert color classes for each breakpoint
            .#{$bp_key}\:alert-#{$key} {
                @include alert-color($val);
            }
        }
    }
}