@primary: ~'ml-tag-primary';
@info: ~'ml-tag-info';
@success: ~'ml-tag-success';
@warning: ~'ml-tag-warning';
@danger: ~'ml-tag-danger';
@plain: ~'ml-tag-plain';
@bordered: ~'ml-tag-bordered';

.ml-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all 0.2s ease;
  &-content {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ml-input {
    padding: 0 5px;
  }
}

// type
.@{info} {
  color: var(--info-color-7);
  background-color: var(--info-color-2);
  &-hover {
    background-color: var(--info-color-3);
  }
}
.@{info}.@{plain} {
  background-color: unset;
  color: var(--info-color-7);
}
.@{info}.@{plain}.@{bordered} {
  border-color: var(--info-color-7);
}
.@{info}.@{bordered} {
  border-color: var(--info-color-7);
}
.@{primary} {
  color: var(--primary-color-7);
  background-color: var(--primary-color-3);
  &-hover {
    background-color: var(--primary-color-4);
  }
}
.@{primary}.@{plain} {
  background-color: unset;
  color: var(--primary-color-7);
}
.@{primary}.@{plain}.@{bordered} {
  background-color: unset;
  color: var(--primary-color-7);
}
.@{primary}.@{bordered} {
  border-color: var(--primary-color-7);
}
.@{success} {
  color: var(--success-color-7);
  background-color: var(--success-color-3);
  &-hover {
    background-color: var(--success-color-4);
  }
}
.@{success}.@{plain} {
  background-color: unset;
  color: var(--success-color-7);
}
.@{success}.@{plain}.@{bordered} {
  border-color: var(--success-color-7);
}
.@{success}.@{bordered} {
  border-color: var(--success-color-7);
}
.@{warning} {
  color: var(--warning-color-7);
  background-color: var(--warning-color-3);
  &-hover {
    background-color: var(--warning-color-4);
  }
}
.@{warning}.@{plain} {
  background-color: unset;
  color: var(--warning-color-7);
}
.@{warning}.@{plain}.@{bordered} {
  border-color: var(--warning-color-7);
}
.@{warning}.@{bordered} {
  border-color: var(--warning-color-7);
}
.@{danger} {
  color: var(--danger-color-7);
  background-color: var(--danger-color-3);
  &-hover {
    background-color: var(--danger-color-4);
  }
}
.@{danger}.@{plain} {
  background-color: unset;
  color: var(--danger-color-7);
  // border-color: var(--danger-color-7);
}
.@{danger}.@{plain}.@{bordered} {
  border-color: var(--danger-color-7);
}
.@{danger}.@{bordered} {
  border-color: var(--danger-color-7);
}

// size
.ml-tag-mini {
  height: 22px;
  line-height: 20px;
  font-size: 12px;
  font-weight: 500;
}
.ml-tag-small {
  height: 24px;
  line-height: 22px;
  font-size: 12px;
  font-weight: 500;
}
.ml-tag-medium {
  height: 30px;
  line-height: 28px;
  font-size: 14px;
  font-weight: 500;
}
.ml-tag-large {
  height: 34px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 500;
}