.ml-tag {
  display: inline-flex;
  padding: 2px 8px;
  border: 1px solid #e8e8e8;
  margin: 0 4px;
  border-radius: 4px;
  font-size: 12px;
  &.is-round {
    border-radius: $ml-border-radius;
  }
  &.ss-primary {
    color: #fff;
    background: $ml-theme-primary-color;
  }
  &.ss-success {
    color: #fff;
    background: $ml-theme-success-color;
  }
  &.ss-info {
    background: #909399;
  }
  &.ss-warning {
    color: #fff;
    background: $ml-theme-warning-color;
  }
  &.ss-danger {
    color: #fff;
    background: $ml-theme-error-color;
  }
  &.ss-gray {
    background: $ml-gray-color;
  }
  &.ss-blue {
    color: #fff;
    background: $ml-blue-color;
  }
  &.ss-green {
    color: #fff;
    background: $ml-green-color;
  }
  &.ss-pink {
    color: #fff;
    background: $ml-pink-color;
  }
  &.ss-red {
    color: #fff;
    background: $ml-red-color;
  }
  &.ss-orange {
    color: #fff;
    background: $ml-orange-color;
  }
  &.ss-purple {
    color: #fff;
    background: $ml-purple-color;
  }
  &.ss-white {
    background: $ml-white-color;
  }
  .ml-tag-close-warpper {
    flex-shrink: 0;
    padding: 0 4px;
    cursor: pointer;
  }
  .ml-tag-close-btn {
    padding: 2px;
    font-size: 12px;
    &:hover {
      color: #fff;
      background: #909399;
      border-radius: 50%;
    }
  }
}