.alert {
  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
  border-width: 2px;
  border-style: solid;
  padding: $unit ($unit * 2);
  line-height: $unit * 3;
  font-size: 14px;
  border-radius: 4px;
  color: $blue-grey-700;
  margin-bottom: $unit * 3;

  &.is-critical {
    border-color: $red-700;
    background: rgba($red-50, .24);
  }

  &.is-important {
    border-color: $amber-700;
    background: rgba($amber-50, .24);
  }

  &.is-helpful {
    border-color: $blue-600;
    background: rgba($blue-50, .24);
  }
}