Asymmetrik/ngx-starter

@use 'sass:map';
@import '../../../styles/shared';

$system-alert-icons: () !default;
$system-alert-icons: map.merge(
    (
        'success': '\f058',
        'info': '\f05a',
        'warning': '\f06a',
        'danger': '\f071'
    ),
    $system-alert-icons
);

.alert {
    align-items: center;

    @each $type, $icon in $system-alert-icons {
        .system-alert-icon-#{$type} {
            &:before {
                content: $icon;
            }
        }
    }

    .system-alert-icon {
        font-size: 2rem;
        margin-right: $spacer;
    }

    .system-alert-content {
        font-size: 1rem;
        flex-grow: 1;
    }

}