@use "./mixins/mixins.scss" as *;

@include b(tag){
  --x-tag-font-color:var(--color-blue-6);
  --x-tag-border-color:#D8EAFF;
  --x-tag-background-color:#D8EAFF;
  --x-tag-hover-color: var(--color-blue-6);
  display: inline-block;
  white-space: nowrap;
  border-radius: 6px;
  max-width: 140px;
  overflow: hidden;
  padding: 0 8px;
  text-overflow: ellipsis;
  height: 22px;
  line-height: 20px;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  font-size: var(--el-font-size-base,12px);
  color:var(--x-tag-font-color);
  border-color:var(--x-tag-border-color);
  background-color:var(--x-tag-background-color);
  font-weight: 400;
  @include e(close){
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    font-size: 10px;
    height: 14px;
    width: 14px;
    line-height: 14px;
    display: inline-block;
    &:hover{
      color:var(--color-white);
      background-color: var(--x-tag-hover-color);
    }
  }
  &+&{
    margin-left: 10px;
  }

  // 尺寸
  @include m(mini){
    height: 18px;
    line-height: 16px;
  }

  // 主题(性质)
  @include m(text){
    --x-tag-background-color:#FFF !important;
    --x-tag-border-color:#FFF !important;
    padding-left: 0px;
    padding-right: 0px;
    @include e(close){
      display: none;
    }
  }
  @include m(line){
    --x-tag-background-color: #EDF7FF;
    --x-tag-border-color:var(--color-blue-5);
  }

  // 类型
  @include m(success){
    --x-tag-font-color: var(--color-green-5);
    --x-tag-hover-color: var(--color-green-5);
    --x-tag-background-color:#E7F8EA;
    --x-tag-border-color:#E7F8EA;
    &.#{$namespace}-tag--line {
      --x-tag-background-color: #F0FAF2;
      --x-tag-border-color: #66BE74;
    }
  }
  @include m(danger){
    --x-tag-font-color: var(--color-red-4);
    --x-tag-hover-color: var(--color-red-4);
    --x-tag-background-color:#FFE3E3;
    --x-tag-border-color:#FFE3E3;
    &.#{$namespace}-tag--line {
      --x-tag-background-color: #FFF1F0;
      --x-tag-border-color:#FF7875;
    }
  }
  @include m(warning){
    --x-tag-font-color: var(--color-orange-4);
    --x-tag-hover-color: var(--color-orange-4);
    --x-tag-background-color:#FFE1CC;
    --x-tag-border-color:#FFE1CC;
    &.#{$namespace}-tag--line {
      --x-tag-background-color: #FFF5ED;
      --x-tag-border-color: #ED6A0C;
    }
  }
  @include m(info){
    --x-tag-font-color: var(--color-grey-7);
    --x-tag-hover-color: var(--color-grey-7);
    --x-tag-background-color: #EEEFF0;
    --x-tag-border-color: #EEEFF0;
    &.#{$namespace}-tag--line {
      --x-tag-background-color: #F2F3F5;
      --x-tag-border-color:  #D8DADD;
    }
  }
  @include m(deep-info){
    --x-tag-font-color: var(--color-grey-7);
    --x-tag-hover-color: var(--color-grey-7);
    --x-tag-background-color:#D8DADD;
    --x-tag-border-color:#D8DADD;
    &.#{$namespace}-tag--line {
      --x-tag-background-color: #E4E5E6;
      --x-tag-border-color: #999999;
    }
  }
  @include m(other){
    --x-tag-font-color: #8A3FD4;
    --x-tag-hover-color: #8A3FD4;
    --x-tag-background-color:#F0E1FF;
    --x-tag-border-color:#F0E1FF;
    &.#{$namespace}-tag--line {
      --x-tag-background-color: #F7F2FC;
      --x-tag-border-color: #A973DF;;
    }
  }
}