@keyframes l-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes l-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes l-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.l-icon-loading {
  animation: l-spin 1s linear infinite;
}
@keyframes l-zoom-out {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}
.l-tag-input {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--td-text-color-primary);
  font-size: var(--td-font-size-body-medium);
  font-family: var(--td-font-family);
  list-style: none;
}
.l-tag-input .l-tag {
  margin-right: 4px;
  animation: t-fade-in 0.1s ease-in-out;
}
.l-tag-input .l-input {
  padding-left: 4px;
  overflow: hidden;
}
.l-tag-input .l-input.l-size-small {
  padding-left: 2px;
}
.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,
.l-tag-input .l-input__prefix:empty {
  margin-left: 4px;
}
.l-tag-input .l-input--auto-width {
  padding-right: 4px;
}
.l-tag-input__suffix-clear {
  cursor: pointer;
}
.l-tag-input--break-line .l-input {
  display: block;
  height: auto;
  padding-right: 24px;
}
.l-tag-input--break-line .l-input.l-input--prefix > .l-input__prefix {
  display: inline;
  text-align: left;
}
.l-tag-input--break-line .l-input .l-input__suffix-icon {
  position: absolute;
  right: 8px;
  bottom: 0;
}
.l-tag-input__prefix {
  width: max-content;
  display: inline-block;
  margin-right: 8px;
}
