//
//  Alert Component
//

@import "./config";
@import "./mixins";

// base styles
//

.Alert {
  padding: 16px;
  margin-bottom: $alert-margin-bottom;
  border: $alert-border-width solid transparent;
  border-radius: $alert-border-radius;
  color: $alert-color;
  font-size: $alert-font-size;
}

// Variants
//

.Alert--danger {
  @include alert-variant($color-danger);
}

.Alert--warning {
  @include alert-variant($color-warning);
}

.Alert--info {
  @include alert-variant($color-info);
}

.Alert--success {
  @include alert-variant($color-success);
}