@import 'settings';

// Alert variants
//
// Alerts don't have default classes, only base and modifier classes.
// A default gray alert doesn't make too much sense, so you're required
// to specify a type via contextual class. Choose from `success`, `info`, `warning`, or `danger`.
//
// .alert-success - Success
// .alert-info - Information
// .alert-warning - Warning
// .alert-danger - Danger
//
// Markup: alert.twig
//
// Weight: 2
//
// style guide: atoms.alert.variant

.alert {
  border-radius: $alert-border-radius;
}

// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.

.alert-success {
  @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}

.alert-info {
  @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}

.alert-warning {
  @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}

.alert-danger {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}
