.alert {
  padding: 8px 35px 8px 14px;
  background-color: scale-color($danger, $lightness: 75%);
  color: #c09853;

  .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: 18px;
    float: right;
    font-size: 1.429em;
    font-weight: bold;
    color: $primary;
    opacity: 0.2;
    filter: alpha(opacity = 20);
    @include hover {
      color: $primary;
      text-decoration: none;
      cursor: pointer;
      opacity: 0.4;
      filter: alpha(opacity = 40);
    }
  }
  button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
  }
  &.alert-success {
    background-color:  dark-light-diff($success, $secondary, 50%, -60%);
    color: $primary;
  }
  &.alert-error {
    background-color:  rgba(dark-light-diff($danger, $secondary, 50%, -60%), .5);
    color: $primary;
  }
  &.alert-info {
    background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
    color: $primary;
    &.clickable {
      color: $tertiary;
    }
  }
}