Asymmetrik/ngx-starter

@import '../../../styles/shared';

@mixin card-message($card-icon-width: 2rem) {
    display: block;

    .col-alert-icon {
        max-width: $card-icon-width;
        flex: 0 0 $card-icon-width;
        background-color: var(--bs-info);
        display: flex;
        justify-content: center;
        align-items: center;

        .alert-icon {
            font-size: 1.6rem;
            color: var(--bs-white);
        }

        &.warn {
            background-color: var(--bs-warning);
        }

        &.error {
            background-color: var(--bs-danger);
        }

        &.motd {
            background-color: var(--bs-success);
        }
    }

    .col-alert-body {
        max-width: calc(100% - #{$card-icon-width});
        flex: 0 0 calc(100% - #{$card-icon-width});
    }
}