// Alerts

.j-main-container {
  .alert {
    margin: .75rem;
  }

}

.alert-heading {
  font-size: $h4-font-size;
}

@keyframes fadeIn {

  from {
    opacity: 0;
    transform: translateY(-1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Only apply margin when #system-message-container contains a visible joomla-alert */
#system-message-container:has(joomla-alert) {
  margin-top: 1em;
}

/* Remove margin when no <joomla-alert> exists */
#system-message-container:not(:has(joomla-alert)) {
  margin-top: 0;
}