.tag-input {
  min-height: var(--spacing-9);
  padding: var(--spacing-2);

  transition: all 0.2s;

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

  cursor: text;

  &:focus-within {
    border: var(--form-border-focus-ring);

    box-shadow: var(--form-box-shadow);
  }

  .tag-input__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

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

    outline: none;

    &::placeholder {
      color: var(--slate-9);
      line-height: var(--line-height-2);
    }
  }

  .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);
  }
}
