@import url(../var.less);

.tag-variant(@color, @background-color, @border-color) {
  color: @color;
  background-color: @background-color;
  border-color: @border-color;

  .w-tag__close {
    color: @color;
    &:hover {
      color: #fff;
      background-color: @color;
    }
  }
}
.genTheme(@backgroundColorWeight, @borderColorWeight, @fontColorWeight, @hoverColorWeight) {
  background-color: mix(@tag-primary-color, @color-white, @backgroundColorWeight);
  border-color: mix(@tag-primary-color, @color-white, @borderColorWeight);
  color: mix(@tag-primary-color,@color-white, @fontColorWeight);

  &.is-hit{
    border-color: @tag-primary-color;
  }

  .w-tag__close {
    color: mix(@tag-primary-color,@color-white, @fontColorWeight);
    &:hover {
      color: @color-white;
      background-color: mix(@tag-primary-color, @color-white, @hoverColorWeight);
    }
  }

  .loopBtnColor(@i) when (@i < (length(@colorlist)+1)) {
    .setBtnColor(extract(@colorTypelist, @i), extract(@colorlist, @i));
    .loopBtnColor(@i+1);
  }
  
  .loopBtnColor(1);


  &.w-tag-checkable{
    background-color: transparent;
    border-color: transparent;
    color: rgba(0,0,0,.65);
  }
  &.w-tag-checkable-checked{
    background-color: @primary-color;
    color:#fff
  }
  .wicon{
    margin-right: 7px;
  }


}


// 定义颜色数组



@danger: @tag-danger-color;
@warning: @tag-warning-color;
@success: @tag-success-color;
@info: @tag-info-color;
@romanPink: #E776AB;
@honeySuckle: #FF7A7D;
@sunsetRed: #FD6744;
@sweetOrange: #FA7912;
@brightYellow:#FFAE02;
@oysterGreen:#81B71E;
@azureGreen:#399F10;
@bottleGreen:#13979D;
@skyBlue:#398CEB;
@Orchid:#6077E6;
@purpleBlue:#3C3FC2;
@romanPurple:#6A32C2;

@colorlist: @danger, @warning, @success, @info,@romanPink,@honeySuckle,@sunsetRed,@sweetOrange,@brightYellow,@oysterGreen,@azureGreen,@bottleGreen,@skyBlue,@Orchid,@purpleBlue,@romanPurple;
@colorTypelist: danger, warning, success, info,romanPink,honeySuckle,sunsetRed,sweetOrange,brightYellow,oysterGreen,azureGreen,bottleGreen,skyBlue,Orchid,purpleBlue,romanPurple;
 
/* 按钮样式开始 */
.setBtnColor(@type,@color) {
    &.w-tag--@{type} {
    background-color: mix(@color, @color-white, @backgroundColorWeight);
    border-color: mix(@color, @color-white, @borderColorWeight);
    color: mix(@color, @color-white, @fontColorWeight);

    &.is-hit{
      border-color: @color;
    }

    .w-tag__close {
      color: mix(@color, @color-white, @fontColorWeight);
      &:hover {
        color: @color-white;
        background-color: mix(@color, @color-white, @hoverColorWeight);
      }
    }
  }
}