.alert {
  &:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: 50px;
    margin: 0 10px 0 0;
    text-align: center;
    line-height: 24px;
    font-weight: 700;
  }
}

.alert-success {
  background-color: rgba($green, .3);
  border-color: none;

  &:before {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px;
    background-color: $green;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
  }
}

.alert-danger {
  background-color: rgba($red, .15);
  border-color: none;

  &:before {
    content: '!';
    color: $white;
    background-color: $red;
  }
}

.alert-info {
  background-color: rgba($white, .5);
  border-color: rgba($black, .1);

  &:before {
    content: '!';
    color: $white;
    background-color: $gray-400;
  }
}