/* ========================================================================
 * ALERT
 * ======================================================================== */
.alert{
  position: relative;
}

.alert-dismissable, .alert-dismissible {
  .close {
    position: absolute;
    top: 0px;
    right: 4px;
  }
}

@include alert-color(default,$color-default);
@include alert-color(primary,$color-primary);
@include alert-color(success,$color-success);
@include alert-color(info,$color-info);
@include alert-color(warning,$color-warning);
@include alert-color(danger,$color-danger);
@include alert-color(lilac,$color-lilac);
@include alert-color(teals,$color-teal);
@include alert-color(inverse,$color-inverse);

.alert-icon{
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 100%;
  i{
    width: 40px;
    height: 40px;
    display: block;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #FFF;
  }
}

.notification-info{
  margin-left: 56px;
  margin-top: -40px;
  min-height: 40px;
  p{
    margin: 0px;
    line-height: 13px;
  }
}

.notification-meta{
  margin-bottom: 3px;
  padding-left: 0px;
  list-style: none outside none;
}

.notification-sender {
  color: #414147;
}

.notification-time {
  font-style: italic;
  color: #999;
}

/* ========================================================================
 * CALLOUT
 * ======================================================================= */
.callout{
  position: relative;
  min-height: 60px;
  margin: 0px;
  padding: 5px 30px 5px 60px;
  border-left: 5px solid #EEE;
  font-size: 0.9em;
  word-wrap: break-word;
  h4{
    margin-top: 0;
  }
  p{
    &:last-child{
      margin-bottom: 0;
    }
  }
  code, .highlight{
    background-color: transparent;
  }
}

@mixin color-callout($selector,$color,$content){
  .callout-#{$selector}{
    background-color: lighten($color,30%);
    border-color: $color;
    &:before{
      position: absolute;
      left: 10px;
      top: 10px !important;
      display: block;
      background: $color;
      color: #fff;
      width: 40px;
      text-align: center;
      height: 40px;
      font-size: 1.5em;
      font-family: 'FontAwesome';
      content: $content;
      line-height: 39px;
    }
    h4{
      color: darken($color,10%);
    }
    a{
      color: darken($color,5%);
      font-weight: bold;
      &:hover{
        color: darken($color,10%);
      }
    }
  }
}

@include color-callout(info,$color-info,"\f0a2");
@include color-callout(warning,$color-warning,"\f071");
@include color-callout(danger,$color-danger,"\f0e7");