// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-tag {
  .reset;

  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: @tag-medium-padding;
  height: @tag-height-medium;
  font: @tag-medium-font;
  color: @tag-text-color;
  border-radius: @tag-border-radius-square;
  border: @tag-default-border-width solid @tag-default-border-color;
  white-space: nowrap;

  .l-icon {
    margin-right: @tag-icon-margin-right;
    width: @tag-icon-size;
    height: @tag-icon-size;
    flex-shrink: 0;
  }

  .@{prefix}-tag__icon-close {
    margin-right: 0;
    margin-left: @tag-close-icon-margin-right;
    font: @tag-large-font;
    cursor: pointer;
    transition: color @anim-duration-base @anim-time-fn-easing;
  }

  &--default {
    color: @tag-default-text-color;
    background-color: @tag-default-background-color;

    .@{prefix}-tag__icon-close {
      color: @tag-close-icon-color;

      &:hover {
        color: @tag-close-icon-hover-color;
      }
    }

    &.@{prefix}-tag--checked {
      color: @tag-checked-color;
      background-color: @tag-checked-background-color;

      &:hover {
        background-color: @tag-checked-hover-bg;
      }
    }

    &:active {
      cursor: default;
    }

    &.@{prefix}-tag--check {
      transition: background-color @anim-duration-base @anim-time-fn-easing;
      cursor: pointer;

      &:hover:not(.@{prefix}-tag--checked):not(.@{prefix}-tag--disabled) {
        background-color: @tag-check-hover-bg;
      }
    }

    // 失效标签
    &.@{prefix}-tag--disabled {
      color: @tag-disabled-color;
      background-color: @tag-disabled-bg;
      cursor: not-allowed;

      &:hover {
        color: @tag-disabled-color;
        background-color: @tag-disabled-bg;
      }

      .l-icon {
        &:hover {
          cursor: pointer;
        }
      }
    }

    &.@{prefix}-tag--outline {
      border-color: @tag-outline-default-border-color;
    }

    &.@{prefix}-tag--light {
      background-color: @tag-default-color-light;
    }

    &.@{prefix}-tag--light-outline {
      border-color: @tag-outline-default-border-color;
      background-color: @tag-default-color-light;
    }
  }

  &--primary {
    background-color: @tag-primary-color;

    &.@{prefix}-tag--outline {
      border-color: @tag-outline-primary-border-color;
    }

    &.@{prefix}-tag--light {
      background-color: @tag-primary-color-light;
    }

    &.@{prefix}-tag--light-outline {
      border-color: @tag-outline-primary-border-color;
      background-color: @tag-primary-color-light;
    }

    &.@{prefix}-tag--light, &.@{prefix}-tag--outline, &.@{prefix}-tag--light-outline {
      color: @tag-primary-color;

      .@{prefix}-tag__icon-close {
        &:hover {
          color: @brand-color-hover;
        }
      }
    }
  }

  &--success {
    background-color: @tag-success-color;

    &.@{prefix}-tag--outline {
      border-color: @tag-outline-success-border-color;
    }

    &.@{prefix}-tag--light {
      background-color: @tag-success-color-light;
    }

    &.@{prefix}-tag--light-outline {
      border-color: @tag-outline-success-border-color;
      background-color: @tag-success-color-light;
    }

    &.@{prefix}-tag--light, &.@{prefix}-tag--outline, &.@{prefix}-tag--light-outline {
      color: @tag-success-color;

      .@{prefix}-tag__icon-close {
        &:hover {
          color: @success-color-hover;
        }
      }
    }
  }

  &--warning {
    background-color: @tag-warning-color;

    &.@{prefix}-tag--outline {
      border-color: @tag-outline-warning-border-color;
    }

    &.@{prefix}-tag--light {
      background-color: @tag-warning-color-light;
    }

    &.@{prefix}-tag--light-outline {
      border-color: @tag-outline-warning-border-color;
      background-color: @tag-warning-color-light;
    }

    &.@{prefix}-tag--light, &.@{prefix}-tag--outline, &.@{prefix}-tag--light-outline {
      color: @tag-warning-color;

      .@{prefix}-tag__icon-close {
        &:hover {
          color: @warning-color-hover;
        }
      }
    }
  }

  &--danger {
    background-color: @tag-danger-color;

    &.@{prefix}-tag--outline {
      border-color: @tag-outline-danger-border-color;
    }

    &.@{prefix}-tag--light {
      background-color: @tag-error-color-light;
    }

    &.@{prefix}-tag--light-outline {
      border-color: @tag-outline-danger-border-color;
      background-color: @tag-error-color-light;
    }

    .@{prefix}-tag__icon-close {
      fill: @error-color;

      &:hover {
        fill: @error-color-hover;
      }
    }

    &.@{prefix}-tag--light, &.@{prefix}-tag--outline, &.@{prefix}-tag--light-outline {
      color: @tag-danger-color;

      .@{prefix}-tag__icon-close {
        &:hover {
          color: @error-color-hover;
        }
      }
    }
  }

  &--dark&:not(.@{prefix}-tag--default) {

    .@{prefix}-tag__icon-close {
      color: @tag-close-icon-color--dark;

      &:hover {
        color: @tag-close-icon-hover-color--dark;
      }
    }
  }

  &.@{prefix}-tag--outline {
    background: transparent;
  }

  &.@{prefix}-size-s {
    padding: @tag-small-padding;
    height: @tag-height-small;
    font: @tag-small-font;

    .l-icon {
      font-size: @tag-small-font;
    }
  }

  &.@{prefix}-size-l {
    padding: @tag-large-padding;
    height: @tag-height-large;
    font: @tag-large-font;

    .l-icon {
      font: @tag-large-font;
    }
  }

  &.@{prefix}-tag--round {
    border-radius: @tag-border-radius-round;
  }

  &.@{prefix}-tag--mark {
    border-radius: 0 @tag-border-radius-round @tag-border-radius-round 0;
  }

  &.@{prefix}-tag--ellipsis {

    .@{prefix}-tag--text {
      display: inline-block;
      .text-ellipsis();
    }
  }
}

a {

  .@{prefix}-tag {
    cursor: pointer;
    transition: all @anim-duration-base linear;

    &:hover {
      color: @link-tag-hover-color;
      background-color: @link-tag-hover-bg;
    }

    &:active {
      color: @link-tag-active-color;
      background-color: @link-tag-active-bg;
    }
  }
}
