/* Container */
.chips {
  @apply flex flex-wrap items-center gap-1.5 px-2 py-1.5 w-full
         rounded-lg border border-gray-300 dark:border-gray-600
         bg-white dark:bg-gray-800
         focus-within:ring-2 focus-within:border-transparent
         cursor-text transition-colors duration-150;
}

.chips-invalid {
  @apply border-red-500 focus-within:ring-red-500;
}

.chips-disabled {
  @apply opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-700;
}

/* Chip item */
.chips-item {
  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm
         bg-indigo-100 dark:bg-indigo-900/40
         text-indigo-700 dark:text-indigo-300
         select-none outline-none
         focus-visible:ring-2 focus-visible:ring-indigo-500;
}

.chips-item[data-focused='true'] {
  @apply ring-2 ring-indigo-500;
}

.chips-item-label {
  @apply leading-none;
}

.chips-item-remove {
  @apply flex items-center justify-center rounded-full
         text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-100
         transition-colors duration-100;
}

/* Input */
.chips-input {
  @apply flex-1 min-w-[80px] outline-none bg-transparent text-sm
         text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500;
}