.ts-wrapper {
  @apply relative;

  /* Remove wrapper border/outline — .ts-control provides its own */
  outline: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;

  &.multi .ts-control > div {
    @apply inline-flex items-center rounded-md bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10 dark:bg-indigo-400/10 dark:text-indigo-400 dark:ring-indigo-400/30 mr-1 mb-1;

    &.active {
      @apply bg-indigo-600 text-white ring-indigo-600;
    }

    .remove {
      @apply ml-1 -mr-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 dark:text-indigo-400 dark:hover:bg-indigo-900/50 transition-colors cursor-pointer;
      border: none !important;
      padding: 0 !important;
      margin-left: 4px !important;
    }
  }

  .ts-control {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    outline: none;
    @apply gap-x-1 gap-y-1 min-h-[38px] !p-1.5 !transition-none;
    box-shadow: none !important;
    overflow: hidden;

    .item {
      overflow: hidden !important;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    input {
      @apply bg-transparent border-none focus:ring-0 !p-0 text-sm ml-1 dark:text-white;
      display: inline-block !important;
      box-shadow: none !important;
      width: auto !important;
      max-width: 100% !important;
    }
  }

  &.focus .ts-control {
    @apply !outline-2 !-outline-offset-2 !outline-indigo-600 dark:!outline-indigo-500;
  }

  &.disabled .ts-control {
    @apply opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800;
  }

  .ts-dropdown {
    @apply absolute z-50 mt-1 w-full rounded-md bg-white py-1 shadow-lg outline-1 outline-black/5 dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10;
    border: none !important;

    .ts-dropdown-content {
      @apply max-h-60 overflow-auto;
    }

    .option {
      @apply block px-4 py-2 text-sm text-gray-700 cursor-pointer dark:text-gray-200;

      &.active {
        @apply !bg-indigo-600 !text-white dark:!bg-indigo-500;
      }

      &.create {
        @apply italic text-indigo-600 dark:text-indigo-400;
      }
    }

    .no-results {
      @apply px-4 py-2 text-sm text-gray-500 dark:text-gray-400;
    }

    .optgroup-header {
      @apply px-4 py-1 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400;
    }
  }
}

/* Fix for tom-select plugin: remove_button */
.ts-wrapper.multi .ts-control > div .remove {
  border-left: none !important;
}