// @import '../_utils.scss';
// @import './tooltip.scss';
// @import './icon.scss';

.#{$tag-prefix-cls} {
  display: inline-block;
  height: $tag-height;
  line-height: $tag-line-height;
  margin: $tag-margin;
  padding: $tag-padding;
  border: 1px solid $border-color-base;
  border-radius: $btn-border-radius-small;
  // background: $background-color-base;
  background: $tag-background;
  font-size: $tag-font-size;
  vertical-align: top;
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
  //transition: all @transition-time @ease-in-out;
  @include theme-border-color($__tag_border-color);
  @include theme-background-color($__tag_background-color);
  > i {
    display: inline;
    font-size: $tag-font-size;
    margin-left: $tag-i-margin-left;
  }
  &:not(.#{$tag-prefix-cls}-border):not(.#{$tag-prefix-cls}-dot):not(.#{$tag-prefix-cls}-checked) {
    background: transparent;
    border: 0;
    color: $text-color;
    @include theme-font-color($__tag_font-color);
    .#{$tag-close-prefix-cls} {
      color: $text-color !important;
      @include theme-font-color($__tag-close_default_font-color, $--important);
    }
  }

  &:not(.#{$tag-prefix-cls}-border) {
    .#{$css-prefix}icon-close {
      @include theme-font-color($__tag-close_default_font-color);
    }
  }

  &-dot {
    height: $tag-dot-height;
    line-height: $tag-dot-line-height;
    border: 1px solid $border-color-base !important;
    color: $text-color !important;
    background: $tag-dot-background !important;
    padding: $tag-dot-padding;
    @include theme-font-color($__tag_dot_font-color, $--important);
    @include theme-border-color($__tag_dot_border-color, $--important);
    @include theme-background-color($__tag_dot_background-color, $--important);

    &-inner {
      width: $tag-dot-inner-width;
      height: $tag-dot-inner-height;
      margin-right: $tag-dot-inner-margin-right;
      border-radius: $tag-dot-inner-border-radius;
      background: $border-color-base;
      position: relative;
      top: $tag-dot-inner-top;
      @include theme-background-color($__tag-inner_dot_background-color);
    }
    .#{$tag-close-prefix-cls} {
      color: $tag-dot-tag-close-color !important;
      margin-left: $tag-dot-tag-close-margin-left !important;
      @include theme-font-color($__tag-close_dot_font-color, $--important);
    }
  }

  &-border {
    height: $tag-border-height;
    line-height: $tag-border-line-height;
    border: 1px solid $border-color-base !important;
    color: $text-color !important;
    background: $tag-border-background !important;
    position: relative;
    @include theme-font-color($__tag_border_font-color, $--important);
    @include theme-border-color($__tag_border_border-color, $--important);
    @include theme-background-color($__tag_border_background-color, $--important);

    .#{$tag-close-prefix-cls} {
      color: $tag-border-tag-close-color !important;
      margin-left: $tag-border-tag-close-margin-left !important;
      @include theme-font-color($__tag-close_border_font-color, $--important);
    }

    &::after {
      content: "";
      display: none;
      width: 1px;
      background: $border-color-base;
      position: absolute;
      top: $tag-border-after-top;
      bottom: $tag-border-after-bottom;
      right: $tag-border-after-right;
      @include theme-background-color($__tag-after_border_background-color);
    }

    &.#{$tag-prefix-cls}-closable {
      &::after {
        display: block;
      }
      .#{$tag-close-prefix-cls} {
        margin-left: 18px !important;
      }
    }

    &.#{$tag-prefix-cls}-blue {
      color: $link-color !important;
      border: 1px solid $link-color !important;
      @include theme-font-color($__tag_info_border_font-color, $--important);
      @include theme-border-color($__tag_info_border_border-color, $--important);

      &::after {
        background: $link-color;
        @include theme-background-color($__tag-after_info_border_background-color);
      }
      .#{$tag-close-prefix-cls} {
        color: $link-color !important;
        @include theme-font-color($__tag-close_info_border_font-color, $--important);
      }
    }
    &.#{$tag-prefix-cls}-green {
      color: $success-color !important;
      border: 1px solid $success-color !important;
      @include theme-font-color($__tag_success_border_font-color, $--important);
      @include theme-border-color($__tag_success_border_border-color, $--important);

      &::after {
        background: $success-color;
        @include theme-background-color($__tag-after_success_border_background-color);
      }
      .#{$tag-close-prefix-cls} {
        color: $success-color !important;
        @include theme-font-color($__tag-close_success_border_font-color, $--important);
      }
    }
    &.#{$tag-prefix-cls}-yellow {
      color: $warning-color !important;
      border: 1px solid $warning-color !important;
      @include theme-font-color($__tag_warning_border_font-color, $--important);
      @include theme-border-color($__tag_warning_border_border-color, $--important);

      &::after {
        background: $warning-color;
        @include theme-background-color($__tag-after_warning_border_background-color);
      }
      .#{$tag-close-prefix-cls} {
        color: $warning-color !important;
        @include theme-font-color($__tag-close_warning_border_font-color, $--important);
      }
    }
    &.#{$tag-prefix-cls}-red {
      color: $error-color !important;
      border: 1px solid $error-color !important;
      @include theme-font-color($__tag_error_border_font-color, $--important);
      @include theme-border-color($__tag_error_border_border-color, $--important);

      &::after {
        background: $error-color;
        @include theme-background-color($__tag-after_error_border_background-color);
      }
      .#{$tag-close-prefix-cls} {
        color: $error-color !important;
        @include theme-font-color($__tag-close_error_border_font-color, $--important);
      }
    }
  }

  &:hover {
    opacity: 0.85;
    @include theme-opacity($__tag_hover_opacity);
  }

  &,
  a,
  a:hover {
    color: $text-color;
    @include theme-font-color($__tag_font-color);
  }

  &-text {
    a:first-child:last-child {
      display: inline-block;
      margin: $tag-text-a-margin;
      padding: $tag-text-a-padding;
    }
  }

  .#{$tag-close-prefix-cls} {
    font-size: $tag-font-size;
    cursor: pointer;
    margin-left: 8px;
    color: $tag-dot-tag-close-color;
    opacity: 0.66;
    position: relative;
    top: 1px;
    //transition: all @transition-time @ease-in-out;
    @include theme-font-color($__tag-close_font-color);
    @include theme-opacity($__tag-close_opacity);

    &:hover {
      opacity: 1;
    }
  }

  &-blue,
  &-green,
  &-yellow,
  &-red {
    border: 0;
    &,
    a,
    a:hover,
    .#{$tag-close-prefix-cls},
    .#{$tag-close-prefix-cls}:hover {
      color: $tag-close-hover-color;
      @include theme-font-color($__tag-close_hover_font-color);
    }
  }

  &-primary,
  &-success,
  &-warning,
  &-error {
    border: 0;
    &,
    a,
    a:hover,
    .#{$tag-close-prefix-cls},
    .#{$tag-close-prefix-cls}:hover {
      color: $tag-close-hover-color;
      @include theme-font-color($__tag-close_hover_font-color);
    }
    //.@{tag-close-prefix-cls}{
    //    top: 2px;
    //}
  }

  &-primary,
  &-primary.#{$tag-prefix-cls}-dot &-dot-inner {
    background: $link-color;
    @include theme-background-color($__tag-inner_info_dot_background-color);
  }

  &-success,
  &-success.#{$tag-prefix-cls}-dot &-dot-inner {
    background: $success-color;
    @include theme-background-color($__tag-inner_success_dot_background-color);
  }

  &-warning,
  &-warning.#{$tag-prefix-cls}-dot &-dot-inner {
    background: $warning-color;
    @include theme-background-color($__tag-inner_warning_dot_background-color);
  }

  &-error,
  &-error.#{$tag-prefix-cls}-dot &-dot-inner {
    background: $error-color;
    @include theme-background-color($__tag-inner_error_dot_background-color);
  }

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    float: left;
  }
}
.#{$tag-prefix-cls}-blue,
.#{$tag-prefix-cls}-blue.#{$tag-prefix-cls}-dot .#{$tag-prefix-cls}-dot-inner {
  background: $link-color;
  @include theme-background-color($__tag-inner_info_dot_background-color);
}

.#{$tag-prefix-cls}-green,
.#{$tag-prefix-cls}-green.#{$tag-prefix-cls}-dot .#{$tag-prefix-cls}-dot-inner {
  background: $success-color;
  @include theme-background-color($__tag-inner_success_dot_background-color);
}

.#{$tag-prefix-cls}-yellow,
.#{$tag-prefix-cls}-yellow.#{$tag-prefix-cls}-dot .#{$tag-prefix-cls}-dot-inner {
  background: $warning-color;
  @include theme-background-color($__tag-inner_warning_dot_background-color);
}

.#{$tag-prefix-cls}-red,
.#{$tag-prefix-cls}-red.#{$tag-prefix-cls}-dot .#{$tag-prefix-cls}-dot-inner {
  background: $error-color;
  @include theme-background-color($__tag-inner_error_dot_background-color);
}