/**!
  Alert box for anspress.

  @example
  <div class="ap-alert">
    <button class="ap-alert-close ap-remove-parent">&times;</button>
    <strong>Title</strong>
    Sample text for the alert box.
  </div>
*/


.ap-alert{
  border: solid 1px rgba(0,0,0,0.05);
  border-radius: 3px;
  padding: 5px 10px;
  margin-bottom: 10px;
  strong{
    display: block;
  }
  i{
    margin-right: 10px;
  }
  &.info{
    background-color: #e4f3ff;
  }

  &.warning{
    background-color: #ffeebd;
  }

  &.error{
    background-color: #fdcdcd;
  }

  &.success{
    background-color: #dff3c8;
  }

  &-close{
    float: right;
    padding: 1px 4px;
    background: #fff;
    font-weight: bold;
    border: solid 1px var(--ap_border-color);
    border-radius: 2px;
    display: block;
    line-height: 100%;
  }
}