@include b(message) {
  min-width: 300px;
  padding: 10px 30px 10px 15px;
  border: none;
  border-radius: 100px;

  @include m(success) {
    box-shadow: 0 0 12px 2px $--color-success;
    .el-message__closeBtn {
      color: mix($--color-white, $--color-success, 50%);
      &:hover {
        color: $--color-success;
      }
    }
  }

  @include m(warning) {
    box-shadow: 0 0 12px 2px $--color-warning;
    .el-message__closeBtn {
      color: mix($--color-white, $--color-warning, 50%);
      &:hover {
        color: $--color-warning;
      }
    }
  }

  @include m(error) {
    box-shadow: 0 0 12px 2px $--color-danger;
    .el-message__closeBtn {
      color: mix($--color-white, $--color-danger, 50%);
      &:hover {
        color: $--color-danger;
      }
    }
  }

  @include e(icon) {
    font-size: 26px;
    animation: waggle 1s 0.5s both infinite;
  }
}

@keyframes waggle {
  0% {
    transform: scale(1);
  }
  10%,
  20% {
    transform: scale(0.9) rotate(-8deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(8deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-8deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}