@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@components/input-tag/style/input-tag.scss' as *;

$input-tag-prefix-cls: string.unquote('#{theme.$prefix}-input-tag');

.#{$input-tag-prefix-cls} {
  @include input-tag-style($input-tag-prefix-cls);
}

// 标签入场/退场：从 scale(0.94) 起步而非 scale(0.5)，轻微弹出即可
.input-tag-zoom-enter-from {
  transform: scale(0.94, 0.94);
  opacity: 0;
}

.input-tag-zoom-enter-to {
  transform: scale(1, 1);
  opacity: 1;
}

.input-tag-zoom-enter-active {
  transition:
    transform theme.$transition-duration-3 theme.$transition-timing-function-standard,
    opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
}

.input-tag-zoom-leave-from {
  transform: scale(1, 1);
  opacity: 1;
}

.input-tag-zoom-leave-to {
  transform: scale(0.94, 0.94);
  opacity: 0;
}

.input-tag-zoom-leave-active {
  position: absolute;
  transition:
    transform theme.$transition-duration-3 theme.$transition-timing-function-standard,
    opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
}

// 列表重排（FLIP）只过渡 transform
.input-tag-zoom-move {
  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
}