@import "../variables.scss";
@import "./variables.scss";
@import "~@alifd/next/lib/core/style/_global";
@import "~@alifd/next/lib/core/style/_motion";
@import "~@alifd/next/lib/tag/scss/variable";
@import "~@alifd/next/lib/tag/scss/mixin";

.#{$css-prefix} {
  &tag.#{$css-prefix}tag-level-normal:not([disabled]):hover {
    .#{$css-prefix}tag-close-btn {
      .#{$css-prefix}icon::after {
        background-color: white;
      }
    }
  }
  &tag.#{$css-prefix}tag-level-primary:not([disabled]):hover {
    .#{$css-prefix}tag-close-btn {
      .#{$css-prefix}icon::after {
        background-color: $b-design-tag-primary-close-btn-bg;
      }
    }
  }
  &tag > .#{$css-prefix}tag-body {
    .#{$css-prefix}icon {
      vertical-align: baseline;
    }
  }

  //不同尺寸下close paddingright
  &tag-large.#{$css-prefix}tag-closable {
    & > .#{$css-prefix}tag-close-btn {
      padding-right: $b-design-tag-size-l-padding-r;
      margin-left: $b-design-tag-size-l-margin-l;
    }

    & > .#{$css-prefix}tag-body {
      max-width: calc(
        100% - #{$tag-size-l-icon-font} - #{$b-design-tag-size-l-margin-l} - #{$b-design-tag-size-l-padding-r}
      );
    }

    &:not([disabled]):hover {
      @include tag-close-btn-bg($tag-size-l-icon-font);
    }
  }

  &tag-medium.#{$css-prefix}tag-closable {
    & > .#{$css-prefix}tag-close-btn {
      padding-right: $b-design-tag-size-m-padding-r;
      margin-left: $b-design-tag-size-m-margin-l;
    }

    & > .#{$css-prefix}tag-body {
      max-width: calc(
        100% - #{$tag-size-m-icon-font} - #{$b-design-tag-size-m-margin-l} - #{$b-design-tag-size-m-padding-r}
      );
    }

    &:not([disabled]):hover {
      @include tag-close-btn-bg($tag-size-m-icon-font);
    }
  }

  &tag-small.#{$css-prefix}tag-closable {
    & > .#{$css-prefix}tag-close-btn {
      padding-right: $b-design-tag-size-s-padding-r;
      margin-left: $b-design-tag-size-s-margin-l;
    }

    & > .#{$css-prefix}tag-body {
      max-width: calc(
        100% - #{$tag-size-s-icon-font} - #{$b-design-tag-size-s-margin-l} - #{$b-design-tag-size-s-padding-r}
      );
    }

    &:not([disabled]):hover {
      @include tag-close-btn-bg($tag-size-s-icon-font);
    }
  }
}
