// ============================================================================
// :: Alert
// ============================================================================
/**
 * Show some useful feedback to the user. Supports several states depending on the type of feedback you want to provide.
 */

// ============================================================================
// :: Root
// ============================================================================
.a-alert {
  padding: 1rem;

  font-size: $font-size-1x-small;

  background-color: $background-color-base;
  border-radius: $border-radius-base;

  @include respond-at($breakpoint-tablet-default) {
    padding: 1.5rem;

    font-size: $font-size-base;
  }

}

// ============================================================================
// :: States
// ============================================================================
.a-alert.is-error {
  color: $ui-error;
  background-color: $ui-error-background;
}

.a-alert.is-warning {
  color: $ui-warning;
  background-color: $ui-warning-background;
}

.a-alert.is-info {
  color: $ui-info;
  background-color: $ui-info-background;
}

.a-alert.is-success {
  color: $ui-success;
  background-color: $ui-success-background;
}