/*------------------------------------*\
    $ALERTS
\*------------------------------------*/
/**
 * Basic alert structural styling. 
 * 
 * Designed and built @kurenn  
 */

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: $base-line-height;
  background-color: lighten($orange, 40%);
  @include border-radius($base-radius);
  color: $warning-alert-color;
  font-size: $base-font-size;

  .header, strong {
    color: $warning-header-color;
    font-weight: 600;
    font-size: $base-font-size;
  }

  .header {
    margin: 0;
  }

  .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: $base-line-height;
    color: darken($dark-orange, 10%);
    float: right;
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    font-weight: 600;
  }
}

.alert-success {
  background-color: lighten($green, 40%);
  color: $success-alert-color;

  .header {
    color: $success-header-color;
  }

  .close {
    color: $dark-green;
  }
}

.alert-info {
  background-color: lighten($blue, 35%);
  color: $info-alert-color;

  .header, strong {
    color: $info-header-color;
  }

  .close {
    color: $dark-blue;
  }
}

.alert-danger {
  background-color: lighten($red, 35%);
  color: $danger-alert-color;

  .header, strong {
    color: $danger-header-color;
  }

  .close {
    color: $dark-red;
  }
}