// Alerts

.alert {
  margin: 1rem 0;
  border-right: 0;
  border-left: 0;
  border-radius: $border-radius-sm;

  &.alert-info {
    color: var(--template-bg-dark);
    background-color: var(--template-bg-dark-10);
    border: 1px solid var(--template-bg-dark-20);
  }

  &.alert-warning {
    color: $state-warning-text;
    background-color: $state-warning-bg;
    border: 1px solid $state-warning-border;
  }

  &.alert-success {
    color: $state-success-text;
    background-color: $state-success-bg;
    border: 1px solid $state-success-border;
  }

  &.alert-error {
    color: $state-error-text;
    background-color: $state-error-bg;
    border: 1px solid $state-error-border;
  }
}

.alert-parent {
  margin-top: 0;
}

fieldset .alert {
  &.alert-info {
    margin: -1rem 0 1rem;
  }
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

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