html[dir="rtl"] {
  @component-namespace el {
    @b message {
      right: auto;
      left: 14px;

      @e group {
        @when with-icon {
          margin-right: 0;
        }

        & p {
          text-align: right;
        }
      }

      @e img {
        left: auto;
        right: 0;
      }

      @e icon {
        margin-right: 0;
        margin-left: 8px;
      }

      @e closeBtn {
        right: auto;
        left: 0;
      }
    }

    .el-message-fade-enter,
    .el-message-fade-leave-active {
      opacity: 0;
      transform: translate(-50%, 0%);
    }
  }
}