/* ==============
messages
=============== */
.sb-form .input :is( [role="alert"], [role="note"] ) {
    justify-content: start;
    width: 100%;
    order: 5;
    min-height: 1.5rem;
}

    .sb-form .input :is( [role="alert"], [role="note"] )::before {
        content: '';
        text-align: center;
        align-self: flex-start;
        min-height: 1.5rem;
        min-width: 40px;
    }


.sb-form .input [role="note"] {
    color: var(--sb-note-color, var(--sb-label-color));
}

    .sb-form .input [role="note"]::before {
        background-color: var(--sb-note-icon-color, var(--sb-note-color, var(--sb-label-color)));
        --sb-svg: var(--sb-note-icon, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m9 6.6-2.4.3v.4H7c.3.1.4.2.3.5l-.7 3.5c-.2.9 0 1.3.8 1.3a2 2 0 0 0 1.4-.6l.1-.4c-.2.2-.5.2-.7.2-.2 0-.3-.2-.3-.5l1-4.7zm0-2.1a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>'));
    }



.sb-form .input [role="alert"] {
    color: var(--sb-alert-color, var(--sb-error-color));
}

    .sb-form .input [role="alert"]::before {
        background-color: var(--sb-alert-icon-color, var(--sb-alert-color, var(--sb-error-color)));
        --sb-svg: var(--sb-alert-icon, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle"><path d="M7.94 2.02A.13.13 0 0 1 8 2a.13.13 0 0 1 .07.02.15.15 0 0 1 .05.05l6.86 11.67c.03.06.03.12 0 .18a.16.16 0 0 1-.06.06.12.12 0 0 1-.06.02H1.15a.12.12 0 0 1-.07-.02.16.16 0 0 1-.05-.06.18.18 0 0 1 0-.18L7.88 2.07a.15.15 0 0 1 .06-.05zm1.04-.45a1.13 1.13 0 0 0-1.96 0L.17 13.23c-.46.78.09 1.77.97 1.77h13.72c.89 0 1.44-.99.98-1.77L8.98 1.57z"/><path d="M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm.1-6a.9.9 0 1 1 1.8 0l-.35 3.5a.55.55 0 0 1-1.1 0L7.1 6z"/></svg>'));
    }