body {
  --tag-padding: 0 8px;
  --tag-border-radius: var(--border-radius-medium);
  --tag-text-color: var(--text-color-anti);
  --tag-border-width: 1px;
  --tag-border-color: transparent;
  --tag-font-size: 12px;
  --tag-line-height: 22px;
  --tag-icon-margin-right: 4px;
  --tag-icon-size: 14px;
  --tag-icon-close-size: 10px;
  --tag-close-icon-margin-left: 6px;
}
.mx-tag {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: var(--tag-padding);
  color: var(--tag-text-color);
  border-radius: var(--tag-border-radius);
  border: var(--tag-border-width) solid var(--tag-border-color);
  font-size: var(--tag-font-size);
  line-height: var(--tag-line-height);
  white-space: nowrap;
}
.mx-tag .mx-icon {
  margin-right: var(--tag-icon-margin-right);
  width: var(--tag-icon-size);
  height: var(--tag-icon-size);
  flex-shrink: 0;
}
.mx-tag .mx-tag__icon-close {
  margin-right: 0;
  margin-left: var(--tag-close-icon-margin-left);
  width: var(--tag-icon-close-size);
  height: var(--tag-icon-close-size);
  cursor: pointer;
}
.mx-tag--default.mx-tag--fill {
  color: var(--text-color-primary);
  background-color: var(--bg-color-component);
}
.mx-tag--default .mx-tag__icon-close {
  color: var(--text-color-placeholder);
}
.mx-tag--default .mx-tag__icon-close:hover {
  color: var(--text-color-primary);
}
.mx-tag--default.mx-tag--outline {
  color: var(--text-color-primary);
  border-color: var(--text-color-primary);
}
.mx-tag--default.mx-tag--light {
  color: var(--text-color-primary);
  background-color: var(--bg-color-container-hover);
}
.mx-tag--default.mx-tag--light-outline {
  color: var(--text-color-primary);
  border-color: var(--text-color-primary);
  background-color: var(--bg-color-container-hover);
}
.mx-tag--brand.mx-tag--fill {
  color: var(--brand-color-1);
  background-color: var(--brand-color);
}
.mx-tag--brand.mx-tag--outline {
  color: var(--brand-color);
  border-color: var(--brand-color);
}
.mx-tag--brand.mx-tag--light {
  color: var(--brand-color);
  background-color: var(--brand-color-1);
}
.mx-tag--brand.mx-tag--light-outline {
  color: var(--brand-color);
  border-color: var(--brand-color);
  background-color: var(--brand-color-1);
}
.mx-tag--brand.mx-tag--light .mx-tag__icon-close,
.mx-tag--brand.mx-tag--outline .mx-tag__icon-close,
.mx-tag--brand.mx-tag--light-outline .mx-tag__icon-close {
  color: var(--brand-color-4);
}
.mx-tag--brand.mx-tag--light .mx-tag__icon-close:hover,
.mx-tag--brand.mx-tag--outline .mx-tag__icon-close:hover,
.mx-tag--brand.mx-tag--light-outline .mx-tag__icon-close:hover {
  color: var(--brand-color-5);
}
.mx-tag--brand.mx-tag--fill .mx-tag__icon-close {
  color: var(--brand-color-3);
}
.mx-tag--brand.mx-tag--fill .mx-tag__icon-close:hover {
  color: var(--brand-color-2);
}
.mx-tag--success.mx-tag--fill {
  color: var(--success-color-1);
  background-color: var(--success-color);
}
.mx-tag--success.mx-tag--outline {
  color: var(--success-color);
  border-color: var(--success-color);
}
.mx-tag--success.mx-tag--light {
  color: var(--success-color);
  background-color: var(--success-color-1);
}
.mx-tag--success.mx-tag--light-outline {
  color: var(--success-color);
  border-color: var(--success-color);
  background-color: var(--success-color-1);
}
.mx-tag--success.mx-tag--light .mx-tag__icon-close,
.mx-tag--success.mx-tag--fill .mx-tag__icon-close {
  color: var(--success-color-3);
}
.mx-tag--success.mx-tag--light .mx-tag__icon-close:hover,
.mx-tag--success.mx-tag--fill .mx-tag__icon-close:hover {
  color: var(--success-color-2);
}
.mx-tag--warning.mx-tag--fill {
  color: var(--warning-color-1);
  background-color: var(--warning-color);
}
.mx-tag--warning.mx-tag--outline {
  color: var(--warning-color);
  border-color: var(--warning-color);
}
.mx-tag--warning.mx-tag--light {
  color: var(--warning-color);
  background-color: var(--warning-color-1);
}
.mx-tag--warning.mx-tag--light-outline {
  color: var(--warning-color);
  border-color: var(--warning-color);
  background-color: var(--warning-color-1);
}
.mx-tag--warning.mx-tag--light .mx-tag__icon-close,
.mx-tag--warning.mx-tag--fill .mx-tag__icon-close,
.mx-tag--warning.mx-tag--light-outline .mx-tag__icon-close {
  color: var(--warning-color-3);
}
.mx-tag--warning.mx-tag--light .mx-tag__icon-close:hover,
.mx-tag--warning.mx-tag--fill .mx-tag__icon-close:hover,
.mx-tag--warning.mx-tag--light-outline .mx-tag__icon-close:hover {
  color: var(--warning-color-2);
}
.mx-tag--error.mx-tag--fill {
  color: var(--error-color-1);
  background-color: var(--error-color);
}
.mx-tag--error.mx-tag--outline {
  color: var(--error-color);
  border-color: var(--error-color);
}
.mx-tag--error.mx-tag--light {
  color: var(--error-color);
  background-color: var(--error-color-1);
}
.mx-tag--error.mx-tag--light-outline {
  color: var(--error-color);
  border-color: var(--error-color);
  background-color: var(--error-color-1);
}
.mx-tag--error.mx-tag--light .mx-tag__icon-close,
.mx-tag--error.mx-tag--fill .mx-tag__icon-close,
.mx-tag--error.mx-tag--light-outline .mx-tag__icon-close {
  color: var(--error-color-3);
}
.mx-tag--error.mx-tag--light .mx-tag__icon-close:hover,
.mx-tag--error.mx-tag--fill .mx-tag__icon-close:hover,
.mx-tag--error.mx-tag--light-outline .mx-tag__icon-close:hover {
  color: var(--error-color-2);
}
.mx-tag.mx-tag--outline {
  background: transparent;
}
.mx-tag.mx-tag--ellipsis .mx-tag--text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}