@import '../../style/mixins/index.less';
@import './token.less';

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

@colors: red, orangered, orange, gold, lime, green, cyan, blue, moblue, purple,
  pinkpurple, magenta, gray;

.@{tag-prefix-cls} {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: @tag-size-default;
  padding: @tag-padding-vertical @tag-padding-horizontal;
  color: @tag-default-color-text;
  font-weight: @tag-text-font-weight;
  font-size: @tag-size-default-font-size;
  line-height: @tag-size-default - @tag-border-width * 2 - @tag-padding-vertical *
    2;
  vertical-align: middle;
  border: @tag-border-width @tag-border-type transparent;
  border-radius: @tag-border-radius;
  background-color: var(--color-fill-2);
  .text-ellipsis();

  .icon-hover(@tag-prefix-cls, 12px, 16px);
  .icon-hover-bg(@tag-prefix-cls, @tag-default-color-bg_hover);

  &-checkable {
    cursor: pointer;
    transition: all @transition-duration-1 @transition-timing-function-linear;
  }

  &-checkable:hover {
    background-color: var(--color-fill-3);
  }

  &-checked {
    background-color: rgb(var(--primary-6));
    color: #fff;
    border-color: @tag-default-color-border;
  }

  &-checkable&-checked:hover {
    background-color: rgb(var(--primary-5));
    border-color: @tag-default-color-border_hover;
  }

  &-bordered,
  &-checkable&-checked&-bordered:hover {
    border-color: @tag-default-bordered-color-border;
  }

  &-hide-background {
    color: var(--color-text-2);
    background-color: transparent !important;
  }

  &-hide-background&-checkable:hover {
    background-color:  var(--color-fill-1) !important;
    border-color: @tag-default-bordered-color-border;
  }

  &-hide-background&-checked {
    background-color: transparent !important;
    border-color: rgb(var(--primary-6));
    color: rgb(var(--primary-6));
  }

  &-bordered&-checked {
    border-color: rgb(var(--primary-6));
  }

  &-hide-background&-checkable&-checked:hover {
    background-color: rgb(var(--primary-1)) !important;
    border-color:  rgb(var(--primary-6));
  }

  // Size
  &-size-small {
    height: @tag-size-small;
    font-size: @tag-size-small-font-size;
    line-height: @tag-size-small - @tag-border-width * 2;
  }

  &-size-medium {
    height: @tag-size-medium;
    font-size: @tag-size-medium-font-size;
    line-height: @tag-size-medium - @tag-border-width * 2;
  }

  &-size-large {
    height: @tag-size-large;
    font-size: @tag-size-large-font-size;
    line-height: @tag-size-large - @tag-border-width * 2;
  }

  &-hide {
    display: none;
  }

  &-loading {
    cursor: default;
    opacity: 0.8;
  }

  &-icon {
    margin-right: @tag-icon-margin-right;
    // color: @tag-default-color-icon;
  }

  &-marked-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: inherit;
  }

  &-marked-icon-svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
  }

  each(@colors, {
    &&-checked&-@{value} {
      color: ~'@{tag-@{value}-color-text}';
      background-color: ~'@{tag-@{value}-color-bg}';
      border: @tag-border-width @tag-border-type ~'@{tag-@{value}-color-border}';

      .icon-hover-bg(@tag-prefix-cls, ~'@{tag-@{value}-color-icon-bg_hover}');
    }

    &&-checkable&-checked&-@{value}&:hover {
      background-color: ~'@{tag-@{value}-color-bg_hover}';
      border-color: ~'@{tag-@{value}-color-border_hover}';
    }

    &&-hide-background&-checkable&-checked&-@{value}&:hover {
      background-color: ~'@{tag-@{value}-color-bg}'!important;
    }

    &&-bordered&-hide-background&-checkable&-checked&-@{value}&:hover {
      background-color: ~'@{tag-@{value}-color-bg}'!important;
      border-color: ~'@{tag-@{value}-bordered-color-border}';
    }

    &-checked&-@{value}&-bordered,
    &-checked&-@{value}&-bordered:hover {
      border-color: ~'@{tag-@{value}-bordered-color-border}';
    }

    &&-checked&-@{value} &-icon,
    &&-checked&-@{value} &-close-btn,
    &&-checked&-@{value} &-loading-icon {
      color: ~'@{tag-@{value}-color-icon}';
    }
  });

  &&-custom-color {
    color: @tag-custom-color-text;

    .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);
  }

  & &-close-btn {
    margin-left: 4px;
    font-size: 12px;

    > svg {
      position: relative;
    }
  }

  & &-loading-icon {
    margin-left: 4px;
    font-size: 12px;
  }
}

@{mo-theme-tag}[mo-theme='dark'] {
  each(@colors, {
    .@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value} {
      background-color: ~'rgba(var(@{mo-cssvars-prefix}-@{value}-6), 0.2)';

      .icon-hover-bg(@tag-prefix-cls, ~'rgba(var(@{mo-cssvars-prefix}-@{value}-6), 0.35)');
    }

    .@{tag-prefix-cls}-checkable.@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value}:hover {
      background-color: ~'rgba(var(@{mo-cssvars-prefix}-@{value}-6), 0.35)';
    }
  });
}