@import 'settings';

// Alert
//
// Provide contextual feedback messages for typical user actions
// with the handful of available and flexible alert messages.
//
// style guide: atoms.alert

// Dismissible alerts
//
// Build on any alert by adding an optional .alert-dismissible and close button.
// For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin.
// This plugin is part of the alert library.
//
// Just add `data-dismiss="alert"` to your close button to
// automatically give an alert close functionality. Closing an alert removes it from the DOM.
//
// To have your alerts use animation when closing,
// make sure they have the `.fade` and `.in` classes already applied to them.
//
// Weight: 1
//
// style guide: atoms.alert.dismissable

.alert {
  position: relative;
  padding: $alert-padding-y 2.75rem $alert-padding-y $alert-padding-x;
  margin-bottom: $line-height-computed;
  border: 1px solid transparent;

  // Headings for larger alerts
  * {
    margin-top: 0;
    // Specified for the h4 to prevent conflicts of changing $headings-color
    color: inherit;
  }

  // Improve alignment and spacing of inner content
  > p,
  > ul {
    margin-bottom: 0;
  }

  > p + p {
    margin-top: 5px;
  }
}

// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.

.alert-dismissible {

  // Adjust close link position
  .close {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;
    right: $alert-padding-y;
    transform: translateY(-50%);

    width: 2rem;
    height: 3.125rem;
    color: inherit;
  }
}


.alert em {
  font-weight: 500;
  font-style: normal;
}


.alert-sm {
  padding: $alert-padding-y-sm $alert-padding-x-sm;
}
