/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import './mixin.less';
@tag-prefix-cls: ~'@{kd-prefix}-tag';

@types: process, success, warning, error, end, expired;
@colors: @tag-process-color, @tag-success-color, @tag-warning-color, @tag-error-color, @tag-end-color, @tag-expired-color;

.@{tag-prefix-cls} {
  &-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-size-small {
    .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal, @tag-max-width, @tag-min-width);
  }

  &-size-middle {
    .tag-size(@tag-middle-font-size, @tag-middle-height, @tag-middle-padding-horizontal, @tag-max-width, @tag-min-width);
  }

  &-size-large {
    .tag-size(@tag-large-font-size, @tag-large-height, @tag-large-padding-horizontal, @tag-max-width, @tag-min-width);
  }

  transition: all @tag-g-motion-duration;
  // 状态标签
  &-shape-status {
    .tag-status(@tag-process-color)
  }
  each(@types, {
      &-shape-status.@{tag-prefix-cls}-@{value} {
        .tag-status(extract(@colors, @index))
      }
  })

  // 属性标签
  &-shape-attribute {
    .tag-attribute(@tag-process-color)
  }
  each(@types, {
    &-shape-attribute.@{tag-prefix-cls}-@{value} {
      .tag-attribute(extract(@colors, @index))
    }
  })
  // 文本标签
  &-shape-text {
    .tag-text-color(@tag-process-color);
  }
  each(@types, {
    &-shape-text.@{tag-prefix-cls}-@{value} {
      .tag-text-color(extract(@colors, @index))
    }
    &-shape-text.@{tag-prefix-cls}-@{value}.@{tag-prefix-cls}-size-middle {
      .tag-text-color(extract(@colors, @index))
    }
    &-shape-text.@{tag-prefix-cls}-@{value}.@{tag-prefix-cls}-size-large {
      .tag-text-color(extract(@colors, @index))
    }
  })

  // 可关闭的标签
  &-shape-edit {
    border: 1px solid @tag-edit-g-color-border;
    border-radius: 2px;
    line-height: @tag-middle-height;
    padding-left: 6px;
    padding-right: 6px;
    color: @tag-edit-g-text-color;
    &:not(.@{tag-prefix-cls}-closable-disabled):hover {
      border-color: @tag-edit-g-color-border-hover;
      .@{tag-prefix-cls}-closeWrapper {
        // background-color: @tag-edit-cloesWrapper-g-color-background-hover;
        color: @tag-edit-cloesWrapper-g-text-color-hover;
      }
    }

    &.@{tag-prefix-cls}-closable {
      padding-right: 8px;
    }
  }

  // 可点击的标签
  &-clickable {
    cursor: pointer;
  }

  // 自定义标签颜色
  &-has-color {
    color: @tag-attribute-g-text-color;
  }

  // 图标设置外边距
  &-text {
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-closable-disabled {
    background-color: @tag-edit-g-color-background-disabled;
    border-color: @tag-edit-g-color-border-disabled;
    color: @tag-edit-g-text-color-disabled;
    cursor: not-allowed;
  }
  &-closable.@{tag-prefix-cls}-size-middle {
    line-height: @tag-middle-height;
  }
  &-closable.@{tag-prefix-cls}-size-large {
    line-height: @tag-large-height;
    padding-left: @tag-large-padding-horizontal;

    .@{tag-prefix-cls}-closeWrapper {
      .@{tag-prefix-cls}-close-icon {
        font-size: 14px;
      }
    }
  }
  &-closeWrapper {
    margin-left: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: color @tag-g-motion-duration, background-color @tag-g-motion-duration;
  }
  &-close-icon {
    cursor: pointer;
    font-size: 12px;
  }
}
.@{tag-prefix-cls}-rtl {
  direction: rtl;
  .@{tag-prefix-cls}-closeWrapper {
    margin-right: 4px;
    margin-left: 0;
  }
}
/*! rtl:end:ignore */