body {
  --alert-padding: 14px;
  --alert-border-radius: var(--border-radius-medium);
  --alert-color-bg: var(--bg-color-container);
  --alert-font-size-icon: 24px;
  --alert-font-size-title: 14px;
  --alert-close-btn-top: 16px;
  --alert-close-btn-right: 16px;
  --alert-right-padding: 24px;
  --alert-icon-padding-right: 12px;
  --alert-color-text-title: var(--text-color-primary);
  --alert-color-text-content: var(--text-color-secondary);
  --alert-title-margin-bottom: 8px;
  --alert-font-size-content: 14px;
  --alert-info-color: var(--brand-color);
  --alert-info-bg-color: var(--brand-color-1);
  --alert-success-color: var(--success-color);
  --alert-success-bg-color: var(--success-color-1);
  --alert-warning-color: var(--warning-color);
  --alert-warning-bg-color: var(--warning-color-1);
  --alert-error-color: var(--error-color);
  --alert-error-bg-color: var(--error-color-1);
  --alert-loading-color: var(--text-color-secondary);
  --alert-loading-bg-color: var(--bg-color-container-hover);
}
.mx-alert {
  display: flex;
  position: relative;
  padding: var(--alert-padding);
  border-radius: var(--alert-border-radius);
  background-color: var(--alert-color-bg);
  box-shadow: var(--alert-box-shadow);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
  align-items: center;
}
.mx-alert-icon {
  font-size: var(--alert-font-size-icon);
  display: inline-flex;
  align-items: center;
}
.mx-alert-info {
  background-color: var(--alert-info-bg-color);
  color: var(--alert-info-color);
}
.mx-alert-info .mx-alert-icon {
  color: var(--alert-info-color);
}
.mx-alert-success {
  background-color: var(--alert-success-bg-color);
  color: var(--alert-success-color);
}
.mx-alert-success .mx-alert-icon {
  color: var(--alert-success-color);
}
.mx-alert-warning {
  background-color: var(--alert-warning-bg-color);
  color: var(--alert-warning-color);
}
.mx-alert-warning .mx-alert-icon {
  color: var(--alert-warning-color);
}
.mx-alert-error {
  background-color: var(--alert-error-bg-color);
  color: var(--alert-error-color);
}
.mx-alert-error .mx-alert-icon {
  color: var(--alert-error-color);
}
.mx-alert-loading {
  background-color: var(--alert-loading-bg-color);
  color: var(--alert-loading-color);
}
.mx-alert-loading .mx-alert-icon {
  color: var(--alert-loading-color);
}
.mx-alert-left {
  padding-right: var(--alert-icon-padding-right);
  display: flex;
  align-self: start;
}
.mx-alert-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  word-break: break-word;
}
.mx-alert-right_padding {
  padding-right: var(--alert-right-padding);
}
.mx-alert-title {
  font-size: var(--alert-font-size-title);
  font-weight: 500;
  margin-bottom: var(--alert-title-margin-bottom);
  line-height: 18px;
}
.mx-alert-info .mx-alert-title {
  color: var(--alert-info-color);
}
.mx-alert-content {
  font-size: var(--alert-font-size-content);
  line-height: 1;
}
.mx-alert-operation-wrapper {
  margin-left: 12px;
}
.mx-alert .mx-alert-close-btn {
  height: 18px;
  cursor: pointer;
  align-self: start;
  font-size: 12px;
}
.mx-alert .mx-alert-close-btn > svg {
  position: relative;
}