blog/sass/shortcodes/_callout.scss

@use '../constants' as *;

@mixin callout-customization($type, $color, $text-icon) {
    &[type="#{$type}"] {
        &>.callout-content {
            border-color: var(#{$color});
            background-color: color-mix(in srgb, var(#{$color}), transparent 90%);

            @media only screen and (max-width: $smartphone) {
                &::before {
                    content: $text-icon;
                    color: var(#{$color});
                    float: left;
                    margin-right: .5rem;
                }
            }
        }

        @media only screen and (min-width: $smartphone) {
            &::before {
                content: $text-icon;
                color: var(#{$color});
            }
        }
    }
}

.callout {
    text-align: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;

    &::before {
        display: inline-block;
        width: 14%;
        font-size: 3rem;
        margin: auto;
        vertical-align: middle;
    }

    &>.callout-title {
        display: none;
    }

    &>.callout-content {
        text-align: initial;
        vertical-align: middle;
        display: inline-block;
        padding: 1.25rem;

        @media only screen and (min-width: $smartphone) {
            width: 85%;
        }

        &>p {
            margin: 0;
        }

        border: {
            style: dashed;
            width: 1px;
            radius: var(--standard-border-radius)
        }
    }

    @include callout_customization("info", "--sapphire", "");
    @include callout_customization("success", "--green", "");
    @include callout_customization("warning", "--yellow", "");
    @include callout_customization("danger", "--red", "󰈸");
    @include callout_customization("error", "--red", "");
    @include callout_customization("tip", "--teal", "󰌵");
    @include callout_customization("note", "--lavender", "");
    @include callout_customization("question", "--sky", "");
    @include callout_customization("example", "--mauve", "");
    @include callout_customization("bug", "--maroon", "");
    @include callout_customization("quote", "--overlay1", "");
}