@import './token.less';

// code component mixin here
.tag-size(@size, @height, @padding, @max-width, @min-width) {
  font-size: @size;
  height: @height;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding: 0 @padding;
  border-radius:  calc(@height / 2);
  max-width: @max-width;
  min-width: @min-width;
}
.tag-status(@color) {
  border: 1px solid @color;
  color: @color;
  &:hover{
    background-color: @color;
    color: #fff;
  }
}
.tag-attribute(@color) {
  color: #fff;
  background-color: @color;
}
.tag-text-color(@color) {
  color: @color;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
}