.tag {
  padding: 0 5px;
  border-radius: 3px;
  background: fade(@primary-1, 30%);
  white-space: nowrap;
  display: inline-block;
  font-size: 14px;
  &-info {
    background: @text-color-blue;
    color: @text-color-dark;
  }
  &-warning {
    background: @text-color-org;
    color: @text-color-dark;
  }
  &-error {
    background: @text-color-red;
    color: @text-color-dark;
  }
  &-success {
    background: @text-color-green;
    color: @text-color-dark;
  }

  // @colorList: org, blue, cyan, red;

  // .tags (@i) when (@i < length(@colorList) + 1) {
  //   @s: extract(@colorList, @i);
  //   @c: 'text-color-@{s}';

  //   &-light-@{s} {
  //     background: fade(@@c, 50%);
  //   }

  //   .tags(@i + 1);
  // }

  // .tags(1);
}