.#{$css-prefix}table-tag {
  display: inline-flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: $S16;
  line-height: $S16;
  position: relative;
  font-size: $S12;
  align-items: center;
  &-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    line-height: $S16;
    border-radius: 50%;
    margin-right: 6px;
  }
  &.#{$css-prefix}table-tag-blue {
    color: $gray-07;
    .#{$css-prefix}table-tag-dot {
      background: $primary-brand;
    }
  }
  &.#{$css-prefix}table-tag-green {
    color: $gray-07;
    .#{$css-prefix}table-tag-dot {
      background: $primary-success;
    }
  }
  &.#{$css-prefix}table-tag-orange {
    color: $gray-07;
    .#{$css-prefix}table-tag-dot {
      background: $primary-warning;
    }
  }
  &.#{$css-prefix}table-tag-red {
    color: $gray-07;
    .#{$css-prefix}table-tag-dot {
      background: $primary-danger;
    }
  }
  &.#{$css-prefix}table-tag-gray {
    color: $gray-07;
    .#{$css-prefix}table-tag-dot {
      background: $gray-05;
    }
  }
}