// Tag
// --------------------------------------------------
@prefix-cls-tag: e("@{prefix-cls}-tag");

@tag-default-text : #999;
@tag-text : #fff;
@tag-default-bg : #f2f2f2;

.@{prefix-cls-tag} {
  display: inline-block;
  vertical-align: middle;
  min-height: 22px;
  // line-height: 22px;
  line-height: 1.8;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 10px;
  overflow: hidden;
  opacity: .85;
  background-color: @tag-default-bg;
  transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
  &:hover {
    opacity: 0.3;
  }

  .@{prefix-cls-tag}-text {
    cursor: pointer;
    color: @tag-default-text;
    text-decoration: none;
  }

  .@{prefix-cls-tag}-close {
    color: @tag-default-text;
    opacity: 0.66;
    cursor: pointer;
    display: inline-block;
    // width: 10px;
    // height: 10px;
    // line-height: 10px;
    // font-size: 16px;
    transform: scale(.66666667) rotate(0deg);
    &:hover {
      opacity: 1;
    }
  }
  &-color {
    .@{prefix-cls-tag}-text {
      color: @tag-text;
    }
    .@{prefix-cls-tag}-close {
      color: @tag-text;
      opacity: 0.66;
      cursor: pointer;
      &:hover {
        opacity: 1;
      }
    }
  }
}