.el-badge {
  --el-badge-bg-color: var(--el-color-danger);
  --el-badge-radius: 10px;
  --el-badge-font-size: 12px;
  --el-badge-padding: 6px;
  --el-badge-size: 18px;
  position: relative;
  vertical-align: middle;
  display: inline-block
}

.el-badge__content {
  background-color: var(--el-badge-bg-color);
  border-radius: var(--el-badge-radius);
  color: var(--el-color-white);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--el-badge-font-size);
  height: var(--el-badge-size);
  padding: 0 var(--el-badge-padding);
  white-space: nowrap;
  border: 1px solid var(--el-bg-color)
}

.el-badge__content.is-fixed {
  position: absolute;
  top: 0;
  right: calc(1px + var(--el-badge-size)/ 2);
  transform: translateY(-50%) translate(100%)
}

.el-badge__content.is-fixed.is-dot {
  right: 5px
}

.el-badge__content.is-dot {
  height: 8px;
  width: 8px;
  padding: 0;
  right: 0;
  border-radius: 50%
}

.el-badge__content--primary {
  background-color: var(--el-color-primary)
}

.el-badge__content--success {
  background-color: var(--el-color-success)
}

.el-badge__content--warning {
  background-color: var(--el-color-warning)
}

.el-badge__content--info {
  background-color: var(--el-color-info)
}

.el-badge__content--danger {
  background-color: var(--el-color-danger)
}

.el-message {
  --el-message-bg-color: var(--el-color-info-light-9);
  --el-message-border-color: var(--el-border-color-lighter);
  --el-message-padding: 15px 19px;
  --el-message-close-size: 16px;
  --el-message-close-icon-color: var(--el-text-color-placeholder);
  --el-message-close-hover-color: var(--el-text-color-secondary)
}

.el-message {
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  border-radius: var(--el-border-radius-base);
  border-width: var(--el-border-width);
  border-style: var(--el-border-style);
  border-color: var(--el-message-border-color);
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translate(-50%);
  background-color: var(--el-message-bg-color);
  transition: opacity var(--el-transition-duration), transform .4s, top .4s;
  padding: var(--el-message-padding);
  display: flex;
  align-items: center
}

.el-message.is-center {
  justify-content: center
}

.el-message.is-closable .el-message__content {
  padding-right: 31px
}

.el-message p {
  margin: 0
}

.el-message--success {
  --el-message-bg-color: var(--el-color-success-light-9);
  --el-message-border-color: var(--el-color-success-light-8);
  --el-message-text-color: var(--el-color-success)
}

.el-message--success .el-message__content {
  color: var(--el-message-text-color);
  overflow-wrap: anywhere
}

.el-message .el-message-icon--success {
  color: var(--el-message-text-color)
}

.el-message--info {
  --el-message-bg-color: var(--el-color-info-light-9);
  --el-message-border-color: var(--el-color-info-light-8);
  --el-message-text-color: var(--el-color-info)
}

.el-message--info .el-message__content {
  color: var(--el-message-text-color);
  overflow-wrap: anywhere
}

.el-message .el-message-icon--info {
  color: var(--el-message-text-color)
}

.el-message--warning {
  --el-message-bg-color: var(--el-color-warning-light-9);
  --el-message-border-color: var(--el-color-warning-light-8);
  --el-message-text-color: var(--el-color-warning)
}

.el-message--warning .el-message__content {
  color: var(--el-message-text-color);
  overflow-wrap: anywhere
}

.el-message .el-message-icon--warning {
  color: var(--el-message-text-color)
}

.el-message--error {
  --el-message-bg-color: var(--el-color-error-light-9);
  --el-message-border-color: var(--el-color-error-light-8);
  --el-message-text-color: var(--el-color-error)
}

.el-message--error .el-message__content {
  color: var(--el-message-text-color);
  overflow-wrap: anywhere
}

.el-message .el-message-icon--error {
  color: var(--el-message-text-color)
}

.el-message__icon {
  margin-right: 10px
}

.el-message .el-message__badge {
  position: absolute;
  top: -8px;
  right: -8px
}

.el-message__content {
  padding: 0;
  font-size: 14px;
  line-height: 1
}

.el-message__content:focus {
  outline-width: 0
}

.el-message .el-message__closeBtn {
  position: absolute;
  top: 50%;
  right: 19px;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--el-message-close-icon-color);
  font-size: var(--el-message-close-size)
}

.el-message .el-message__closeBtn:focus {
  outline-width: 0
}

.el-message .el-message__closeBtn:hover {
  color: var(--el-message-close-hover-color)
}

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