.message {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
}

.message-info {
    color: color-mix(in srgb, var(--val-color--info) 40%, black);
    background-color: color-mix(in srgb, var(--val-color--info) 15%, var(--val-color--bg));
    border-color: color-mix(in srgb, var(--val-color--info) 40%, var(--val-color--bg));
}

.message-warning {
    color: color-mix(in srgb, var(--val-color--warning) 40%, black);
    background-color: color-mix(in srgb, var(--val-color--warning) 15%, var(--val-color--bg));
    border-color: color-mix(in srgb, var(--val-color--warning) 40%, var(--val-color--bg));
}

.message-error {
    color: color-mix(in srgb, var(--val-color--danger) 40%, black);
    background-color: color-mix(in srgb, var(--val-color--danger) 15%, var(--val-color--bg));
    border-color: color-mix(in srgb, var(--val-color--danger) 40%, var(--val-color--bg));
}