@use 'sass:math';

@mixin toast($bg-color: white) {
    display: block;
    padding: $base-padding;
    border: $base-border-thickness solid #ddd;
    box-shadow: $base-box-shadow;
    border-radius: math.div($base-border-radius, 4);
    background-color: $bg-color;
}

@mixin toast-outline($border-color: $primary) {
    display: block;
    padding: $base-padding;
    border: $base-border-thickness solid #ddd;
    box-shadow: $base-box-shadow;
    border-radius: math.div($base-border-radius, 4);
    border-color: $border-color;
}

.toast {
    @include toast;

    .toast-title {
        font-size: $font-size-lg;
        padding-bottom: $base-padding;
        font-weight: bold;
    }

    .toast-body {
        font-size: $base-font-size;

        a {
            text-decoration: underline;
        }
    }
}

@each $key, $val in $colors {
    .toast-#{$key} {
        @include toast($val);
    }

    .toast-outlined-#{$key} {
        @include toast-outline($val);
    }
}