Callout Notice Boxes

<?php
if ( ! function_exists( 'scseed_notice_shortcode' ) ) {
    function scseed_notice_shortcode( $atts, $content = '' ) {
        $atts          = shortcode_atts( [ 'type' => 'info', 'title' => '', 'icon' => '' ], $atts, 'sc_notice' );
        $allowed_types = [ 'info', 'success', 'warning', 'error' ];
        $type          = in_array( $atts['type'], $allowed_types, true ) ? $atts['type'] : 'info';
        $default_icons = [ 'info' => 'i', 'success' => '+', 'warning' => '!', 'error' => 'x' ];
        $icon          = ! empty( $atts['icon'] ) ? esc_html( $atts['icon'] ) : $default_icons[ $type ];
        $title_html    = ! empty( $atts['title'] )
            ? '<strong class="scseed-notice-title">' . esc_html( $atts['title'] ) . '</strong>'
            : '';
        $body          = wp_kses_post( do_shortcode( $content ) );
        $out           = '<div class="scseed-notice scseed-notice--' . esc_attr( $type ) . '" role="note">';
        $out          .= '<span class="scseed-notice-icon" aria-hidden="true">' . $icon . '</span>';
        $out          .= '<div class="scseed-notice-body">' . $title_html . '<div class="scseed-notice-text">' . $body . '</div></div>';
        $out          .= '</div>';
        return $out;
    }
}
add_shortcode( 'sc_notice', 'scseed_notice_shortcode' );

.scseed-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 6px;
    margin: 20px 0;
    border-left: 4px solid;
}
.scseed-notice--info    { background: #eef2ff; border-color: #6366f1; color: #312e81; }
.scseed-notice--success { background: #f0fdf4; border-color: #22c55e; color: #14532d; }
.scseed-notice--warning { background: #fffbeb; border-color: #f59e0b; color: #78350f; }
.scseed-notice--error   { background: #fef2f2; border-color: #ef4444; color: #7f1d1d; }
.scseed-notice-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    margin-top: 1px;
    color: #fff;
}
.scseed-notice--info    .scseed-notice-icon { background: #6366f1; }
.scseed-notice--success .scseed-notice-icon { background: #22c55e; }
.scseed-notice--warning .scseed-notice-icon { background: #f59e0b; }
.scseed-notice--error   .scseed-notice-icon { background: #ef4444; }
.scseed-notice-body  { flex: 1; font-size: 14px; line-height: 1.6; }
.scseed-notice-title { display: block; font-size: 15px; margin-bottom: 4px; }
.scseed-notice-text p:first-child { margin-top: 0; }
.scseed-notice-text p:last-child  { margin-bottom: 0; }