/*
Alert
==============================================
Custom skin styling for bootstrap alert component.

https://getbootstrap.com/docs/5.2/components/alerts
*/

@mixin sw-skin-alert($color, $background) {
    background-color: $color;

    .alert-content-container {
        background-color: $background;
        color: $color;
    }

    .icon {
        color: $white;
    }
}

.alert {
    .icon {
        margin: $spacer-sm;
        flex: 0 0 auto;

        svg {
            top: 0;
        }
    }
}

.alert-has-icon {
    align-items: normal;
}

.alert-content-container {
    padding: $spacer-sm;
    flex-grow: 1;
}

@each $color, $value in $theme-colors {
    .alert-#{$color} {
        @include sw-skin-alert($value, tint-color($value, 80%));
    }
}
