@keyframes t-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes t-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes t-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.l-icon-loading {
  animation: t-spin 1s linear infinite;
}
@keyframes t-zoom-out {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}
.l-tag-input {
  font: var(--td-font-body-medium);
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  /** 设计稿：未填充标签场景，边距和已填充不同 */
}
.l-tag-input .l-tag {
  animation: t-fade-in 0.2s ease-in-out;
  margin: var(--td-comp-margin-xxs) var(--td-comp-margin-xs) var(--td-comp-margin-xxs) 0;
}
.l-tag-input .l-tag-input__drag_wrapper + .l-tag-input__drag_wrapper {
  margin-left: var(--td-comp-margin-xs);
}
.l-tag-input .l-input {
  overflow: hidden;
  min-height: var(--td-comp-size-m);
  height: fit-content;
  padding: 1px var(--td-comp-paddingLR-s) 1px var(--td-comp-margin-xs);
}
.l-tag-input .l-input .l-input__suffix-icon {
  right: var(--td-comp-margin-s);
}
.l-tag-input .l-input.l-size-s {
  padding: 0 var(--td-comp-paddingLR-xxs) 0 var(--td-comp-margin-xs);
  min-height: var(--td-comp-size-xs);
}
.l-tag-input .l-input.l-size-s .l-tag {
  margin: 1px var(--td-comp-margin-xs) 1px 0;
}
.l-tag-input .l-input.l-size-l {
  min-height: var(--td-comp-size-xl);
  padding-right: var(--td-comp-paddingLR-m);
}
.l-tag-input .l-input.l-size-l .l-input__suffix-icon {
  right: var(--td-comp-margin-m);
}
.l-tag-input.l-is-empty .l-input__inner {
  margin-left: var(--td-comp-margin-xs);
}
.l-tag-input:hover .l-input__inner,
.l-tag-input .l-input--focused .l-input__inner {
  min-width: 20px;
}
.l-tag-input .l-tag-input__prefix {
  margin-left: var(--td-comp-margin-xs);
}
.l-tag-input .l-input .l-input__prefix:not(:empty) {
  margin-right: 0;
}
.l-tag-input.l-input--auto-width .l-input.l-input--focused {
  padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs));
}
.l-tag-input.l-input--auto-width .l-input__prefix {
  white-space: nowrap;
}
.l-tag-input__suffix-clear {
  cursor: pointer;
}
.l-tag-input--break-line:not(.l-is-empty) .l-input {
  display: block;
}
.l-tag-input--break-line:not(.l-is-empty) .l-input.l-input--prefix > .l-input__prefix {
  display: inline;
  text-align: left;
}
.l-tag-input--break-line:not(.l-is-empty) .l-input .l-input__suffix-icon {
  position: absolute;
  bottom: 0;
}
.l-tag-input--break-line:not(.l-is-empty) .l-tag-input__prefix {
  vertical-align: text-top;
}
.l-tag-input__prefix {
  width: max-content;
  display: inline-block;
  margin-right: var(--td-comp-margin-s);
}
/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */
.l-tag-input--break-line.l-tag-input--with-tag:not(.l-input--auto-width) .l-input,
.l-tag-input.l-input--auto-width:hover .l-input {
  padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs));
}
.l-tag-input--break-line.l-tag-input--with-tag:not(.l-input--auto-width) .l-size-l .l-input,
.l-tag-input.l-input--auto-width:hover .l-size-l .l-input {
  padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs));
}
/** auto-width 模式，左右边距相同 */
.l-tag-input.l-input--auto-width .l-input {
  padding-right: 0;
}
