@import '~antd/es/tag/style/index.less';
@import '../variable.less';

@tag-prefix-cls: ~'@{ant-prefix}-tag';

.@{tag-prefix-cls} {
  border: none;
  height: @tag-line-height;
  line-height: @tag-line-height;
  padding: @tag-padding-vertical @tag-padding-horizontal;
  margin-right: 0;
  font-weight: @font-weight-medium;

  &-small {
    line-height: @tag-line-height-sm;
    padding: @tag-padding-vertical @tag-padding-horizontal-sm;

    > .@{tag-prefix-cls}-small-content {
      display: inline-block;
      transform: scale(0.83333);
    }
  }

  &-success {
    color: @success-color;
    background: @success-color-tag-bg;
    border: none;
  }

  &-error {
    color: @error-color;
    background: @error-color-tag-bg;
    border: none;
  }

  &-processing {
    color: @primary-color;
    background: @primary-color-tag-bg;
    border: none;
  }

  &-warning {
    color: @warning-color;
    background: @warning-color-tag-bg;
    border: none;
  }

  &-default {
    color: @text-color-tertiary;
    background: @text-color-divider;
  }

  &-bordered {
    border: 1px solid @border-color-base;
    line-height: @tag-line-height - 2px;
    padding: @tag-padding-vertical @tag-padding-horizontal - 1px;
  }

  &-bordered.@{tag-prefix-cls}-small {
    line-height: @tag-line-height-sm - 2px;
    padding: @tag-padding-vertical @tag-padding-horizontal-sm - 1px;
  }

  &-bordered.@{tag-prefix-cls}-success {
    border-color: rgba(@success-color, 0.4);
  }

  &-bordered.@{tag-prefix-cls}-error {
    border-color: rgba(@error-color, 0.4);
  }

  &-bordered.@{tag-prefix-cls}-processing {
    border-color: rgba(@primary-color, 0.4);
  }

  &-bordered.@{tag-prefix-cls}-warning {
    border-color: rgba(@warning-color, 0.4);
  }

  &-has-icon {
    padding: @tag-padding-vertical @tag-has-icon-padding-horizontal;
    position: relative;

    > .@{iconfont-css-prefix} {
      position: absolute;
      top: (@tag-line-height - @tag-icon-size) / 2;
      left: @tag-has-icon-padding-horizontal;

      svg {
        font-size: @tag-icon-size;
        fill: currentColor;
      }
    }

    > .@{iconfont-css-prefix} + span,
    > span + .@{iconfont-css-prefix} {
      margin-left: @tag-icon-size + @tag-icon-margin-right;
    }
  }

  &-has-icon.@{tag-prefix-cls}-bordered {
    > .@{iconfont-css-prefix} {
      top: (@tag-line-height - @tag-icon-size - 2px) / 2;
      left: @tag-has-icon-padding-horizontal - 1px;
    }
  }
}