/*
 * Component: alert
 * ----------------
 */

.alert {
  .border-radius(3px);
  h4 {
    font-weight: 600;
  }
  .icon {
    margin-right: 10px;
  }
  .close {
    color: #000;
    .opacity(.2);
    &:hover {
      .opacity(.5);
    }
  }
  a {
    color: #fff;
    text-decoration: underline;
  }
}

//Alert Variants
.alert-success {
  &:extend(.bg-green);
  border-color: darken(@green, 5%);
}

.alert-danger,
.alert-error {
  &:extend(.bg-red);
  border-color: darken(@red, 5%);
}

.alert-warning {
  &:extend(.bg-yellow);
  border-color: darken(@yellow, 5%);
}

.alert-info {
  &:extend(.bg-aqua);
  border-color: darken(@aqua, 5%);
}