.message {
    --message-color: var(--status-info);
    --message-surface: var(--status-info-surface);
    --message-ink: var(--status-info-text);

    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    font-weight: 550;
    background-color: var(--message-surface);
    border-inline-start: 4px solid var(--message-color);
    color: var(--message-ink);

    svg { block-size: 1.5rem }
    i { font-size: 0.75rem }

    &.is-success {
        --message-color: var(--status-success);
        --message-surface: var(--status-success-surface);
        --message-ink: var(--status-success-text);
    }

    &.is-warning {
        --message-color: var(--status-warning);
        --message-surface: var(--status-warning-surface);
        --message-ink: var(--status-warning-text);
    }

    &.is-error {
        --message-color: var(--status-danger);
        --message-surface: var(--status-danger-surface);
        --message-ink: var(--status-danger-text);
    }
}