.tag-input__container {
  min-height: 4rem;
  padding: calc(0.5rem - 1px);

  transition: all 0.2s;

  border: var(--form-border);
  border-radius: var(--form-border-radius);

  cursor: text;

  &:focus,
  &:focus-within {
    box-shadow: var(--focus-box-shadow);
  }
}

.tag-input__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-input__input {
  /* For placeholder to show complete */
  min-width: 15rem;

  outline: none;

  &::placeholder {
    color: var(--gray-400);
    line-height: 1.25rem;
  }
}

.tag-input__duplicate-error {
  animation: var(--conductor-fade-in);

  color: var(--red-11);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-1);
}
