[Sugestão] Sugestão estilização mensagens

Olá a todos, venho aqui só para da uma sugestão para estilizar as mensagens de error e success. Caso seja uma mensagem de error a div sera vermelha se for mensagem de sucesso a div será verde.

No index.html fiz dessa maneira, segue codigo abaixo.

    {% for message in messages %}
    <div
      class="alert {% if message.tags == 'success' %}alert-primary{% elif message.tags == 'error' %}alert-danger{% endif %}"
    >
      <p id="messages">{{ message }}</p>
    </div>
    {% endfor %}
# ```

No arquivo seteup/static/styles/style.css fiz dessa forma asseguir

.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: 1px solid var(--bs-alert-border-color);
  --bs-alert-border-radius: 0.375rem;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

.alert-primary {
  --bs-alert-color: #08980a;
  --bs-alert-bg: #dcffcf;
  --bs-alert-border-color: #dcffcf;
}

.alert-danger {
  --bs-alert-color: #842029;
  --bs-alert-bg: #f8d7da;
  --bs-alert-border-color: #f5c2c7;
}