//
// Base styles
//
$alert-colors:
    'primary' var(--theme-primary-color-contrast, $blue-800) var(--theme-primary-color, $blue-100) var(--theme-primary-color-variant, $blue-300),
    'secondary' $gray-700 $gray-200 $gray-400,
    'danger' $red-900 $red-100 $red-300,
    'success' $green-800 $green-100 $green-300,
    'warning' $yellow-800 $yellow-100 $yellow-300,
    'info' $blue-800 $blue-100 $blue-300,
    'light' $gray-900 $gray-100 $gray-300,
    'dark' $white $gray-600 $gray-800;


@each $color, $text-color, $alert-bg, $alert-sm-border in $alert-colors {
    // Overrides calculated alert color provided by Bootstrap
    .alert.alert-#{$color} {
        color: #{$text-color};
        border-color: #{$alert-bg};
        background-color: #{$alert-bg};
    }

    //Custom small alert border color
    .alert-sm.alert-#{$color} {
        border: 2px solid #{$alert-sm-border};
    }
}

.alert {
    //Custom Small alert
    &.alert-sm {
        padding: .4rem .6rem;
        border-radius: 30px;
        line-height: 1;
        display: flex;
        align-items: center;

        > * + *:last-child {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

