body {
  --notification-width: 340px;
  --notification-padding: 20px 20px 20px 20px;
  --notification-border-radius: var(--border-radius-medium);
  --notification-margin-bottom: 20px;
  --notification-color-bg: var(--bg-color-container);
  --notification-font-size-icon: 24px;
  --notification-font-size-title: 16px;
  --notification-color-text-title: var(--text-color-primary);
  --notification-color-text-content: var(--text-color-secondary);
  --notification-title-margin-bottom: 8px;
  --notification-font-size-content: 14px;
  --notification-box-shadow: var(--shadow-2), var(--shadow-inset-top), var(--shadow-inset-right), var(--shadow-inset-bottom), var(--shadow-inset-left);
}
.mx-notification-wrapper {
  position: fixed;
  display: flex;
  width: 100%;
  padding: 0 20px;
  flex-direction: column;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1003;
}
.mx-notification-wrapper-top {
  top: 20px;
}
.mx-notification-wrapper-top-left {
  top: 20px;
}
.mx-notification-wrapper-top-right {
  top: 20px;
}
.mx-notification-wrapper-bottom {
  bottom: 20px;
}
.mx-notification-wrapper-bottom-left {
  bottom: 20px;
}
.mx-notification-wrapper-bottom-right {
  bottom: 20px;
}
.mx-notification {
  display: flex;
  position: relative;
  width: var(--notification-width);
  padding: var(--notification-padding);
  border-radius: var(--notification-border-radius);
  margin-bottom: var(--notification-margin-bottom);
  background-color: var(--notification-color-bg);
  box-shadow: var(--notification-box-shadow);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
}
.mx-notification-icon {
  font-size: var(--notification-font-size-icon);
  display: inline-flex;
  align-items: center;
  color: var(--brand-color);
}
.mx-notification-info .mx-notification-icon {
  color: var(--brand-color);
}
.mx-notification-success .mx-notification-icon {
  color: var(--success-color);
}
.mx-notification-warning .mx-notification-icon {
  color: var(--warning-color);
}
.mx-notification-error .mx-notification-icon {
  color: var(--error-color);
}
.mx-notification-left {
  padding-right: 16px;
}
.mx-notification-right {
  flex: 1;
  word-break: break-word;
}
.mx-notification-title {
  font-size: var(--notification-font-size-title);
  font-weight: 500;
  color: var(--notification-color-text-title);
  margin-bottom: var(--notification-title-margin-bottom);
}
.mx-notification-content {
  font-size: var(--notification-font-size-content);
  color: var(--notification-color-text-content);
}
.mx-notification-btn-wrapper {
  margin-top: 16px;
  text-align: right;
}
.mx-notification .mx-notification-close-btn {
  position: absolute;
  cursor: pointer;
  top: 20px;
  right: 16px;
  color: 16px;
  font-size: 12px;
}
.mx-notification .mx-notification-close-btn > svg {
  position: relative;
}