@perfma/heaven/es/tag/index.less

An UI Framework base [Ant Design V4](https://ant.design/components/overview-cn/) for React.

@import '~antd/es/tag/style/index.less';
@import '../style/vars.less';

@preset-colors: red, yellow, green, blue, geekblue, cyan, orange, purple,
  magenta, lime, pink, volcano, gold;
@bg-default: #fafafa;

.@{ant-prefix}-tag {
  border-radius: 2px !important;
  padding: 1px 8px !important;

  &-default:not(.@{ant-prefix}-tag-has-color) {
    background-color: @bg-default;
  }

  // mixin to iterate over colors and create CSS class for each one
  .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
    .make-color-classes(@i - 1);
    @color: extract(@preset-colors, @i);

    @bgColor: '@{color}-1';
    @textColor: '@{color}-6';
    @borderColor: '@{color}-6';

    &-@{color} {
      color: @@textColor;
      background: @@bgColor !important;
      border: 1px solid @@borderColor !important;
    }
  }

  &-disabled {
    color: #b6b6b6;
    background: #f4f4f4;
    border: 1px solid #b6b6b6;
  }

  .make-color-classes();

  &-add {
    border: 1px dashed #d4d9dc !important;
    background: #fff !important;
  }

  &-add,
  .anticon-plus,
  .anticon-close {
    cursor: pointer;
  }

  .@{ant-prefix}-icon-close {
    color: #b6b6b6 !important;

    &:hover {
      color: #343434 !important;
    }
  }

  &-add {
    .anticon {
      color: #b6b6b6 !important;
    }
    &:hover {
      .anticon {
        color: #343434 !important;
      }
    }
  }
}