/* default altert (danger) */

.alert {

  /*
  symfony message labels:
  - success
  - notice
  - error

  Versione con overlay:
  --------------------------
  {%- set alerts = app.flashes -%} {# app.flashes può essere letto una sola volta #}
  {%- if alerts|length -%}
    <div class="alert-overlay">
      {%- for label, messages in alerts -%}
        <div class="mx-lg mb-0 alert alert-{{ label }}">
          <button type="button" class="btn-close" data-dismiss="alert-overlay" aria-label="Chiudi"></button>
          {{ messages|join('<br>')|raw }}
        </div>
      {%- endfor -%}
    </div>
  {%- endif -%}
  --------------------------
*/

  /* alert-danger (default) */
  --_alert-bg-color: var(--status-danger-background-color);
  --_alert-fg-color: var(--status-danger-fg);
  --_alert-border-color: var(--status-danger-border-color);

  position: relative;

  &.alert-warning, &.alert-notice {
    --_alert-bg-color: var(--status-warning-color);
    --_alert-fg-color: var(--status-warning-fg);
    --_alert-border-color: var(--status-warning-border-color);
  }
  &.alert-info {
    --_alert-bg-color: var(--status-info-color);
    --_alert-fg-color: var(--status-info-fg);
    --_alert-border-color: var(--status-info-border-color);
  }
  &.alert-success {
    --_alert-bg-color: var(--status-success-color);
    --_alert-fg-color: var(--status-success-fg);
    --_alert-border-color: var(--status-success-border-color);
  }

  padding: var(--size-base) var(--size-xl) var(--size-base) var(--size-base);
  margin: var(--size-base) 0;
  font-size: var(--font-size-base);
  /* font-weight: var(--font-weight-semibold); */
  color: var(--_alert-fg-color);
  background-color: var(--_alert-bg-color);
  border: 1px solid var(--_alert-border-color);
  border-radius: var(--alert-border-radius);
  box-shadow: var(--alert-box-shadow);

  *:not(.btn-close) {
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--_alert-fg-color) !important;
  }
  h2 {
    margin: 0 0 var(--size-xs);
    font-size: var(--font-size-lg);
  }
  p {
    margin-block-end: var(--size-xs);
    &:last-child {
      margin-block-end: 0;
    }
  }

  /* TODO alerts links */
  /* a {
  text-decoration: underline;
  text-underline-offset: 3px;
  &, &:visited {
    color: var(--_alert-link-color);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration-thickness: 4px;
      background-color: color-mix(in srgb, var(--body-background-color) 30%, transparent);
    }
  }
} */

  .btn-close {
    position: absolute;
    top: -.3rem;
    right: -.3rem;
  }

}