markdown {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;

    position: relative;

    padding: 1em 1em 1em 3em;
    margin-bottom: 1em;

    border-left: 6px solid transparent;

    animation-name: wiggle-left-right;
    animation-duration: 1.2s;
    animation-delay: 0.3s;

    font-size: 15.2px;
    line-height: 16.2px;

    &::before {
        position: absolute;
        left: 0;
        width: 3em;
        height: 100%;

        text-align: center;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;

        font-size: 1.1em;
    }

    &.info {
        animation: none;

        border-left-color: $color_markdown_info_border;
        background-color: $color_markdown_info_background;
        color: $color_markdown_info_text;

        &::before {
            content: "\f05a";
        }
    }

    &.success {
        border-left-color: $color_markdown_success_border;
        background-color: $color_markdown_success_background;
        color: $color_markdown_success_text;

        &::before {
            content: "\f058";
        }
    }

    &.warn {
        animation: none;

        border-left-color: $color_markdown_warn_border;
        background-color: $color_markdown_warn_background;
        color: $color_markdown_warn_text;

        &::before {
            content: "\f071";
        }
    }

    &.fail,
    &.error {
        border-left-color: $color_markdown_error_border;
        background-color: $color_markdown_error_background;
        color: $color_markdown_error_text;

        &::before {
            content: "\f06a";
        }
    }
}