@include b(alert) {
  font-size: $size-base;
  display: flex;
  padding-left: 22px;
  padding-right: 10px;
  width: 100%;

  @include e(icon) {
    line-height: 30px;
    margin-right: 12px;
  }

  @include e(content) {
    flex: 1;
    line-height: 30px;
  }

  @include e(close) {
    line-height: 30px;
    cursor: pointer;
  }
  @include m(success){
    background-color: mix($success-color, $alert-mixin-color, 20%);
    color: $success-color;
  }

  @include m(error){
    background-color: mix($danger-color, $alert-mixin-color, 20%);
    color: $danger-color;
  }

  @include m(info){
    background-color: mix($info-color, $alert-mixin-color, 20%);
    color: $info-color;
  }

  @include m(warning) {
    background-color: mix($warning-color, $alert-mixin-color, 20%);
    color: $warning-color;
  }

  @include when(top) {
    position: fixed;
    top: 20px;
    left: 24px;
    right: 24px;
  }
}