@tag-prefix: ~'@{icecream-prefix}-tag';
@tag-filled-prefix: ~'@{tag-prefix}-filled';

.@{tag-prefix} {
  .extendBaseEnhanced();
  display: inline-block;
  height: 20px;
  padding: 0 5px;
  .setFontSize(@icecream-font-size-1);
  line-height: 18px;
  border: 1px solid @icecream-color-grey-7;
  border-radius: 1px;

  &-text {
    display: inline-block;
  }

  &-close {
    margin-left: 4px;
    color: @icecream-color-grey-7;
    vertical-align: -0.125em;
    cursor: pointer;

    &:hover {
      color: @icecream-color-grey-8;
    }
  }

  &-small {
    height: 14px;
    padding: 0 3px;
    .setFontSize(@icecream-font-size-1);
    line-height: 12px;

    .@{tag-prefix}-text,
    .@{tag-prefix}-close {
      // 文字从 12 缩小到 10
      transform: scale(10 / 12);
    }

    .@{tag-prefix}-close {
      margin-left: 0;
    }
  }

  &-color-blue {
    color: @icecream-color-blue-6;
    background: fade(@icecream-color-blue-6, 10%);
    border-color: fade(@icecream-color-blue-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-blue-6;
    }
  }

  &-color-cobalt {
    color: @icecream-color-cobalt-6;
    background: fade(@icecream-color-cobalt-6, 10%);
    border-color: fade(@icecream-color-cobalt-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-cobalt-6;
    }
  }

  &-color-cyan {
    color: @icecream-color-cyan-6;
    background: fade(@icecream-color-cyan-6, 10%);
    border-color: fade(@icecream-color-cyan-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-cyan-6;
    }
  }

  &-color-green {
    color: @icecream-color-green-6;
    background: fade(@icecream-color-green-6, 10%);
    border-color: fade(@icecream-color-green-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-green-6;
    }
  }

  &-color-grey {
    color: @icecream-text-color;
    background: @icecream-color-grey-3;
    border-color: @icecream-color-grey-7;

    &.@{tag-filled-prefix} {
      background: @icecream-color-grey-7;
    }
  }

  &-color-lemon {
    color: @icecream-color-lemon-6;
    background: fade(@icecream-color-lemon-6, 10%);
    border-color: fade(@icecream-color-lemon-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-lemon-6;
    }
  }

  &-color-magenta {
    color: @icecream-color-magenta-6;
    background: fade(@icecream-color-magenta-6, 10%);
    border-color: fade(@icecream-color-magenta-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-magenta-6;
    }
  }

  &-color-olivine {
    color: @icecream-color-olivine-6;
    background: fade(@icecream-color-olivine-6, 10%);
    border-color: fade(@icecream-color-olivine-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-olivine-6;
    }
  }

  &-color-orange-red {
    color: @icecream-color-orange-red-6;
    background: fade(@icecream-color-orange-red-6, 10%);
    border-color: fade(@icecream-color-orange-red-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-orange-red-6;
    }
  }

  &-color-orange {
    color: @icecream-color-orange-6;
    background: fade(@icecream-color-orange-6, 10%);
    border-color: fade(@icecream-color-orange-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-orange-6;
    }
  }

  &-color-purple {
    color: @icecream-color-purple-6;
    background: fade(@icecream-color-purple-6, 10%);
    border-color: fade(@icecream-color-purple-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-purple-6;
    }
  }

  &-color-red {
    color: @icecream-color-red-6;
    background: fade(@icecream-color-red-6, 10%);
    border-color: fade(@icecream-color-red-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-red-6;
    }
  }

  &-color-yellow {
    color: @icecream-color-yellow-6;
    background: fade(@icecream-color-yellow-6, 10%);
    border-color: fade(@icecream-color-yellow-6, 50%);

    &.@{tag-filled-prefix} {
      background: @icecream-color-yellow-6;
    }
  }
}

.@{tag-filled-prefix} {
  color: @icecream-white;
  border-color: transparent;

  .@{tag-prefix}-close {
    color: inherit;

    &:hover {
      color: @icecream-color-grey-3;
    }
  }
}