@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';
@import '~@alifd/next/lib/core/util/_mixin';

.#{$css-prefix} {
  &tag-group {
    .#{$css-prefix}xs {
      @include tag-group-margin($tag-size-s-margin);
    }
  }

  &tag {
    cursor: pointer;
    .#{$css-prefix}tag-body {
      cursor: pointer;
    }
  }

  &tag-xs {
    @include tag-size(
      $b-design-tag-size-xs-height,
      $tag-size-line-height,
      $tag-border-width,
      $b-design-tag-size-xs-padding-lr,
      $b-design-tag-size-xs-text-size,
      $b-design-tag-size-xs-icon-font,
      $b-design-tag-size-xs-content-min-width,
      0px
    );
  }

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

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

  &tag > .#{$css-prefix}tag-body {
    .#{$css-prefix}icon {
      vertical-align: baseline;
    }
  }

  //select focus时状态
  &tag-checkable.#{$css-prefix}tag-level-primary.checked:not(.disabled):not([disabled]):focus {
    border-color: $color-brand1-2;
    background-color: $color-brand1-2;

    &:hover {
      border-color: $color-brand1-3;
      background-color: $color-brand1-3;
    }
  }

  &tag-checkable {
    &.#{$css-prefix}tag-xs {
      &:not(.#{$css-prefix}tag-level-primary) {
        @include checkable-tag-tick-size(
          0px,
          $b-design-tag-size-xs-tick-icon-size
        );
      }
    }

    &.#{$css-prefix}tag-level-normal.checked:after {
      transform: scale(1);
      right: 1px;
    }

    &.#{$css-prefix}tag-level-normal.#{$css-prefix}tag-large.checked:after {
      transform: scale(0.8);
      right: 0px;
    }
  }

  //checkable时勾的位置
  &tag-checkable.#{$css-prefix}tag-large:not(.#{$css-prefix}tag-level-primary):after {
    bottom: calc(
      (
          #{$tag-size-l-height} - #{$tag-size-l-tick-icon-size} - #{$tag-border-width} *
            2
        ) / 2
    );
  }

  &tag-checkable.#{$css-prefix}tag-medium:not(.#{$css-prefix}tag-level-primary):after {
    bottom: calc(
      (
          #{$tag-size-m-height} - #{$tag-size-m-tick-icon-size} - #{$tag-border-width} *
            2
        ) / 2
    );
  }

  &tag-checkable.#{$css-prefix}tag-small:not(.#{$css-prefix}tag-level-primary):after {
    bottom: calc(
      (
          #{$tag-size-s-height} - #{$tag-size-s-tick-icon-size} - #{$tag-border-width} *
            2
        ) / 2
    );
  }

  &tag-checkable.#{$css-prefix}tag-xs:not(.#{$css-prefix}tag-level-primary):after {
    font-size: $b-design-tag-size-xs-tick-icon-size;
    bottom: calc(
      (
          #{$b-design-tag-size-xs-height} - #{$b-design-tag-size-xs-tick-icon-size} -
            #{$tag-border-width} * 2
        ) / 2
    );
  }

  //不同尺寸下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($b-design-tag-size-l-icon-bg-size);
    }
  }

  &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($b-design-tag-size-m-icon-bg-size);
    }
  }

  &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($b-design-tag-size-s-icon-bg-size);
    }
  }

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

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

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

  //theme=grey
  &tag.#{$css-prefix}grey {
    &.#{$css-prefix}tag-level-normal,
    &.#{$css-prefix}tag-level-primary {
      border-color: white;
      background-color: white;

      &:not(.disabled):not([disabled]):hover,
      &:not(.disabled):not([disabled]).hover,
      &:not(.disabled):not([disabled]):focus {
        border-color: white;
        background-color: white;
      }
    }

    &.#{$css-prefix}tag-checkable {
      &.#{$css-prefix}tag-level-normal {
        background-color: transparent;

        &:not(.disabled):not([disabled]):hover,
        &:not(.disabled):not([disabled]).hover,
        &:not(.disabled):not([disabled]):focus {
          background-color: transparent;
          border-color: white;
        }

        &.checked {
          border-color: $b-design-tag-grey-checked-normal-border-color;

          &:not(.disabled):not([disabled]):hover,
          &:not(.disabled):not([disabled]).hover,
          &:not(.disabled):not([disabled]):focus {
            background-color: transparent;
            border-color: $b-design-tag-grey-checked-normal-border-color;
          }
        }
      }

      &.#{$css-prefix}tag-level-primary {
        &:not(.disabled):not([disabled]):hover,
        &:not(.disabled):not([disabled]).hover {
          background-color: white;
          border-color: white;
        }

        &.checked:not(.disabled):not([disabled]),
        &.checked:not(.disabled):not([disabled]):hover,
        &.checked:not(.disabled):not([disabled]).hover,
        &.checked:not(.disabled):not([disabled]):focus {
          background: $b-design-tag-grey-checked-primary-border-color;
          border-color: $b-design-tag-grey-checked-primary-border-color;
        }
      }
    }

    &.#{$css-prefix}tag-checkable.#{$css-prefix}tag-level-primary.checked[disabled],
    &.disabled.#{$css-prefix}tag-checkable.#{$css-prefix}tag-level-primary.checked {
      background-color: white;
    }

    &.#{$css-prefix}tag-checkable.#{$css-prefix}tag-level-normal[disabled],
    &.disabled.#{$css-prefix}tag-checkable.#{$css-prefix}tag-level-normal {
      border-color: white;
    }

    &.#{$css-prefix}tag-level-normal:not([disabled]):hover
      .#{$css-prefix}tag-close-btn
      .#{$css-prefix}icon::after {
      background-color: $b-design-tag-grey-close-btn-bg;
    }
  }
}
// 彩色tag样式
// normal
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]):hover {
  background-color: $color-white;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal.#{$css-prefix}Red,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]).#{$css-prefix}Red:hover {
  color: $color-brand7-7;
  border-color: $color-brand7-3;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal.#{$css-prefix}Orange,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]).#{$css-prefix}Orange:hover {
  color: $color-brand8-7;
  border-color: $color-brand8-3;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal.#{$css-prefix}Magenta,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]).#{$css-prefix}Magenta:hover {
  color: $color-brand6-7;
  border-color: $color-brand6-3;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal.#{$css-prefix}Purple,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]).#{$css-prefix}Purple:hover {
  color: $color-brand4-7;
  border-color: $color-brand4-3;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal.#{$css-prefix}BluePurple,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]).#{$css-prefix}BluePurple:hover {
  color: $color-brand3-7;
  border-color: $color-brand3-3;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal.#{$css-prefix}Blue,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]).#{$css-prefix}Blue:hover {
  color: $color-brand1-7;
  border-color: $color-brand1-3;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal.#{$css-prefix}Azure,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]).#{$css-prefix}Azure:hover {
  color: $color-brand2-7;
  border-color: $color-brand2-3;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal.#{$css-prefix}GoldGreen,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-normal:not(.disabled):not([disabled]).#{$css-prefix}GoldGreen:hover {
  color: $color-brand5-7;
  border-color: $color-brand5-3;
}
// primary
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary.#{$css-prefix}Red,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary:not(.disabled):not([disabled]).#{$css-prefix}Red:hover {
  color: $color-brand7-7;
  background-color: $color-brand7-2;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary.#{$css-prefix}Orange,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary:not(.disabled):not([disabled]).#{$css-prefix}Orange:hover {
  color: $color-brand8-7;
  background-color: $color-brand8-2;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary.#{$css-prefix}Magenta,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary:not(.disabled):not([disabled]).#{$css-prefix}Magenta:hover {
  color: $color-brand6-7;
  background-color: $color-brand6-2;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary.#{$css-prefix}Purple,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary:not(.disabled):not([disabled]).#{$css-prefix}Purple:hover {
  color: $color-brand4-7;
  background-color: $color-brand4-2;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary.#{$css-prefix}BluePurple,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary:not(.disabled):not([disabled]).#{$css-prefix}BluePurple:hover {
  color: $color-brand3-7;
  background-color: $color-brand3-2;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary.#{$css-prefix}Blue,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary:not(.disabled):not([disabled]).#{$css-prefix}Blue:hover {
  color: $color-brand1-7;
  background-color: $color-brand1-2;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary.#{$css-prefix}Azure,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary:not(.disabled):not([disabled]).#{$css-prefix}Azure:hover {
  color: $color-brand2-7;
  background-color: $color-brand2-2;
}
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary.#{$css-prefix}GoldGreen,
.#{$css-prefix}tag-default.#{$css-prefix}tag-level-primary:not(.disabled):not([disabled]).#{$css-prefix}GoldGreen:hover {
  color: $color-brand5-7;
  background-color: $color-brand5-2;
}