@use 'variables';

$dg-alert-bg-alpha: 0.05;

.dg-alert {
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 20px;
    margin: 10px 0px;
    padding: 10px 20px;
    border-left: 0px;
    background: variables.$dg-gray-80;
    border-radius: 1px;

    &::after {
        content: '';
        position: absolute;
        display: inline-block;
        top: 0px;
        left: 0px;
        bottom: 0px;
        width: 3px;
        border-radius: 1px;
    }
}

@each $name, $color in variables.$dg-theme-colors {
    .dg-alert-#{$name} {
        background-color: rgba($color: $color, $alpha: $dg-alert-bg-alpha);
        &::after {
            background: $color;
        }
    }
}