.ht-base-tag{
  &.ivu-tag{
    height: 24px;
    line-height: 24px;
  }
  &.ivu-tag-dot{
    height: 32px;
    line-height: 32px;
    .ivu-tag-dot-inner{
      margin-right: 4px;
    }
    & .ivu-icon-ios-close{
      margin-left: 4px!important;
    }
  }

  &.ivu-tag-border:hover{
    border-color: @link-hover-color;
    .ivu-tag-text{
      color: @link-hover-color;
    }
    .ivu-icon{
      color: @link-hover-color!important;
    }
  }
  &.ivu-tag-success.ivu-tag-border:hover{
    background: #EDFFF3!important;
    .ivu-icon{
      color: @success-color!important;
    }
  }
  &.ivu-tag-error.ivu-tag-border:hover{
    background: #FFEFE6!important;
    .ivu-icon{
      color: @error-color!important;
    }
  }
  &.ivu-tag-warning.ivu-tag-border:hover{
    background: #FFF9E6!important;
    .ivu-icon{
      color: @warning-color!important;
    }
  }
  &.ivu-tag-border:hover:after{
    background-color: @link-hover-color;
  }
  &.ivu-tag-success.ivu-tag-border:hover:after{
    background-color: @success-color;
  }
  &.ivu-tag-error.ivu-tag-border:hover:after{
    background-color: @error-color;
  }
  &.ivu-tag-warning.ivu-tag-border:hover:after{
    background-color: @warning-color;
  }
  &.ivu-tag-dot:hover{
    border-color: @link-hover-color!important;
    .ivu-tag-dot-inner{
      background-color: @link-hover-color;
    }
    .ivu-tag-text{
      color: @link-hover-color;
    }
    .ivu-icon{
      color: @link-hover-color!important;
    }
  }
  &.ivu-tag-success.ivu-tag-dot:hover{
    background: #EDFFF3!important;
    border-color: @success-color!important;
    .ivu-tag-dot-inner{
      background-color: @success-color;
    }
    .ivu-tag-text{
      color: @success-color;
    }
    .ivu-icon{
      color: @success-color!important;
    }
  }
  &.ivu-tag-error.ivu-tag-dot:hover{
    background: #FFEFE6!important;
    border-color: @error-color!important;
    .ivu-tag-dot-inner{
      background-color: @error-color;
    }
    .ivu-tag-text{
      color: @error-color;
    }
    .ivu-icon{
      color: @error-color!important;
    }
  }
  &.ivu-tag-warning.ivu-tag-dot:hover{
    background: #FFF9E6!important;
    border-color: @warning-color!important;
    .ivu-tag-dot-inner{
      background-color: @warning-color;
    }
    .ivu-tag-text{
      color: @warning-color;
    }
    .ivu-icon{
      color: @warning-color!important;
    }
  }
  &.ivu-tag-default{
    background: transparent;
  }

}

/*
.ht-base-tag.ant-tag {
  .anticon-close {
    position: relative;
    opacity: .66;
  }
}

.ht-base-tag-border {
  height: 24px;
  line-height: 24px;
  border: 1px solid #e8eaec;
  //color: #e8eaec;
  color: #515a6e;
  background: #fff !important;
  position: relative;
}

.ht-base-tag-border-closable:after {
  content: '';
  width: 1px;
  background: currentColor;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 22px;
  color: #e8eaec;
}

.ht-base-tag-border.ht-base-tag-border-closable .anticon-close {
  margin-left: 18px;
  left: 4px;
  top: -1px;
}

.ht-base-tag-dot .anticon-close {
  margin-left: 18px;
  left: 4px;
}

.ht-base-tag-dot {
  height: 32px;
  line-height: 32px;
  border: 1px solid #e8eaec !important;
  color: #515a6e !important;
  background: #fff !important;
  padding: 0 12px;
  position: relative;
  padding-left: 32px;
}

.ht-base-tag-dot:before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e8eaec;
  position: absolute;
  top: 10px;
  left: 10px;
}

.ht-base-tag-default {
  background: #f7f7f7;
  color: #515a6e;
  border: 1px solid #e8eaec;
}

.ht-base-tag-primary {
  background: @primary-color;
}

.ht-base-tag-success {
  background: @success-color;
}

.ht-base-tag-warning {
  background: @warning-color;
}

.ht-base-tag-error {
  background: @error-color;
}

.ht-base-tag-border.ht-base-tag-primary {
  color: @primary-color !important;
  border: 1px solid @primary-color !important;
}

.ht-base-tag-border.ht-base-tag-success {
  color: @success-color !important;
  border: 1px solid @success-color !important;
}

.ht-base-tag-border.ht-base-tag-warning {
  color: @warning-color !important;
  border: 1px solid @warning-color !important;
}

.ht-base-tag-border.ht-base-tag-error {
  color: @error-color !important;
  border: 1px solid @error-color !important;
}

.ht-base-tag-primary.ht-base-tag-border:after, .ht-base-tag-primary.ht-base-tag-border.ht-base-tag-border-closable .anticon-close {
  color: @primary-color;
}

.ht-base-tag-success.ht-base-tag-border:after, .ht-base-tag-success.ht-base-tag-border.ht-base-tag-border-closable .anticon-close {
  color: @success-color;
}

.ht-base-tag-warning.ht-base-tag-border:after, .ht-base-tag-warning.ht-base-tag-border.ht-base-tag-border-closable .anticon-close {
  color: @warning-color;
}

.ht-base-tag-error.ht-base-tag-border:after, .ht-base-tag-error.ht-base-tag-border.ht-base-tag-border-closable .anticon-close {
  color: @error-color;
}

.ht-base-tag-primary.ht-base-tag-dot:before {
  background: @primary-color;
}

.ht-base-tag-success.ht-base-tag-dot:before {
  background: @success-color;
}

.ht-base-tag-warning.ht-base-tag-dot:before {
  background: @warning-color;
}

.ht-base-tag-error.ht-base-tag-dot:before {
  background: @error-color;
}

.ht-base-tag-primary.ht-base-tag-dot .anticon-close,
.ht-base-tag-success.ht-base-tag-dot .anticon-close,
.ht-base-tag-warning.ht-base-tag-dot .anticon-close,
.ht-base-tag-error.ht-base-tag-dot .anticon-close {
  color: rgba(0, 0, 0, 0.66) !important;
}

.ht-base-tag-primary.ht-base-tag-dot .anticon-close:hover,
.ht-base-tag-success.ht-base-tag-dot .anticon-close:hover,
.ht-base-tag-warning.ht-base-tag-dot .anticon-close:hover,
.ht-base-tag-error.ht-base-tag-dot .anticon-close:hover {
  opacity: 1 !important;
}

.ht-base-tag-primary.ht-base-tag-border .anticon-close:hover,
.ht-base-tag-success.ht-base-tag-border .anticon-close:hover,
.ht-base-tag-warning.ht-base-tag-border .anticon-close:hover,
.ht-base-tag-error.ht-base-tag-border .anticon-close:hover {
  opacity: 1 !important;
}
*/
