/*doc
---
title: Alerts
name: alerts
category: Components
---
 Alerts should always starts with a word that tell the user more about the feedback in short.

```html_example
<div class="alert alert-success alert-dismissable" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <span class="label label-success">New</span> <strong>Wohooo!</strong> Thanks for signing up!
</div>
<div class="alert alert-info alert-dismissable" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <span class="label label-info">Info</span> <strong>Morning!</strong> Looks like you are happy today!
  <a class="pull-right" href="#">Yes I am!</a>
</div>
<div class="alert alert-warning" role="alert"><span class="label label-warning">Schedule</span> <strong>Hey!</strong> You have two scheduled posts!<a class="pull-right" href="#">View scheduled posts</a></div>
<div class="alert alert-danger" role="alert"><span class="label label-danger">Warning</span> <strong>Grrr!</strong> Don't drop coffee on my keyboard again!</div>
```
*/

.alert {
  padding: $gutter-vertical-half $gutter-horizontal-x2;

  .label {
    margin-right: $gutter-horizontal-x2;
  }

  a {
    text-decoration: underline;
  }

}

.alert-dismissable,
.alert-dismissible {
  padding-right: $gutter-horizontal-x3;

  .close {
    right: -12px;
    top: 0;
  }
}