/**
 * Styles and variables for the rb-c-alert component.
 */
/**
 * An alert box displayed on the page that warns or informs.
 *
 * This is used to show something important to the user. It can display an
 * informational message/hint, a successful result, an warning, or an error.
 * The text will be displayed alongside an icon, which is dependent on the
 * type. The information may optionally be presented with leading or
 * sectional headers.
 *
 * Modifiers:
 *     -is-error:
 *         The alert represents an error.
 *
 *     -is-info:
 *         The alert represents information useful to the user.
 *
 *     -is-success:
 *         The alert represents a successful result.
 *
 *     -is-warning:
 *         The alert represents a warning.
 *
 * Structure:
 *     <div class="rb-c-alert -is-[type]">
 *      <p class="rb-c-alert__content">...</p>
 *     </div>
 */
.rb-c-alert {
  border-radius: 4px;
  border: 1px transparent solid;
  margin: 0 0 1em 0;
  padding: 1em;
  /**
   * Content to display within the alert.
   *
   * If showing only a single paragraph of text, this should be a ``<p>`` tag.
   * If showing multiple paragraphs, or other HTML content, use a ``<div>``
   * with the content inside.
   *
   * Structure:
   *     <p class="rb-c-alert__content">...</p>
   *
   *     <div class="rb-c-alert__content">
   *      <h3 class="rb-c-alert__heading">...</h3>
   *      <p>...</p>
   *      ...
   *     </div>
   */
  /**
   * An optional header above content in the alert.
   *
   * This may be used anywhere within an ``.rb-c-alert__content`` to provide
   * a heading above some part of the content. A common usage would be to
   * provide it as the first element to create a prominent heading for the
   * alert.
   *
   * Structure:
   *     <h3 class="rb-c-alert__heading">
   *      text...
   *     </h3>
   */
}
.rb-c-alert:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: left;
  font-size: 18px;
  margin-right: 0.5em;
  text-align: center;
  width: 18px;
}
.rb-c-alert:last-child {
  margin-bottom: 0;
}
.rb-c-alert.-is-error {
  background: #FFD6DC;
  border-color: #ff8a9b;
}
.rb-c-alert.-is-error:before {
  content: "\f06a";
}
.rb-c-alert.-is-info {
  background: #DAEBFF;
  border-color: #8ec2ff;
}
.rb-c-alert.-is-info:before {
  content: "\f05a";
}
.rb-c-alert.-is-success {
  background: #D1F5A9;
  border-color: #6dbc16;
}
.rb-c-alert.-is-success:before {
  content: "\f00c";
}
.rb-c-alert.-is-warning {
  background: #FFF4B0;
  border-color: #caad00;
}
.rb-c-alert.-is-warning:before {
  content: "\f071";
}
.rb-c-alert__content {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.rb-c-alert__content > :first-child {
  margin-top: 0;
  padding-top: 0;
}
.rb-c-alert__content > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.rb-c-alert__heading {
  font-size: 100%;
  font-weight: bold;
  margin: 2em 0 1em 0;
  padding: 0;
}
/*# sourceMappingURL=alert.css.map */