.formkit-label-search-select{
  @apply block mb-2 font-semibold text-sm formkit-invalid:text-red-500 dark:formkit-invalid:text-danger;
}

.formkit-label-searchSelect {
  @apply block mb-2 font-semibold text-sm formkit-invalid:text-red-500 dark:formkit-invalid:text-danger;
}

.formkit-inner-searchSelect {
  @apply relative w-full;
}

.formkit-input-searchSelect {
  @apply w-full min-h-[38px] px-3 py-2
    text-sm
    rounded-lg
    border
    border-[rgb(var(--fk-border-color))]
    bg-[rgb(var(--bg-2))]
    placeholder-secondary
    focus:border-primary
    focus:outline-none
    disabled:opacity-50
    disabled:cursor-not-allowed;
}

.formkit-message-searchSelect {
  @apply formkit-invalid:text-red-500 dark:formkit-invalid:text-danger;
}

/* Vue Select specific styling to match FormKit theme */
.v-select {
  @apply relative w-full;
}

.v-select .vs__dropdown-toggle {
  @apply flex items-center min-h-[38px] px-3 py-2
    bg-[rgb(var(--bg-2))]
    border border-[rgb(var(--fk-border-color))]
    rounded-lg
    cursor-pointer
    transition-all duration-150 ease-in-out;
}

.v-select:not(.vs--disabled) .vs__dropdown-toggle:hover {
  @apply border-[rgb(var(--fk-border-hover-color))];
}

.v-select.vs--open .vs__dropdown-toggle {
  @apply border-primary shadow-[0_0_0_1px_rgb(var(--fk-primary-color))];
}

.v-select.vs--disabled .vs__dropdown-toggle {
  @apply bg-[rgb(var(--fk-disabled-bg))] cursor-not-allowed opacity-50;
}

.v-select .vs__selected-options {
  @apply flex items-center flex-1 py-0 px-0 min-h-[1.5rem];
}

.v-select .vs__selected {
  @apply text-[rgb(var(--fk-text-color))] text-sm m-0 p-0 border-none bg-transparent;
}

.v-select .vs__search {
  @apply bg-transparent border-none outline-none text-sm text-[rgb(var(--fk-text-color))] m-0 p-0 w-auto max-w-full;
}

.v-select .vs__search::placeholder {
  @apply text-[rgb(var(--fk-placeholder-color))];
}

.v-select .vs__actions {
  @apply flex items-center px-1;
}

.v-select .vs__open-indicator {
  @apply text-[rgb(var(--fk-text-secondary-color))] cursor-pointer transition-transform duration-200 ease-in-out;
  fill: currentColor;
}

.v-select.vs--open .vs__open-indicator {
  @apply rotate-180;
}

.v-select .vs__dropdown-menu {
  @apply absolute top-full left-0 right-0 z-[1050] mt-1
    bg-[rgb(var(--bg-2))]
    border border-[rgb(var(--fk-border-color))]
    rounded-lg
    shadow-lg
    max-h-[300px]
    overflow-y-auto
    py-1;
}

.v-select .vs__dropdown-option {
  @apply px-3 py-2 cursor-pointer text-sm text-[rgb(var(--fk-text-color))] transition-colors duration-150 ease-in-out leading-5;
}

.v-select .vs__dropdown-option--highlight {
  @apply bg-[rgb(var(--fk-hover-bg))] text-[rgb(var(--fk-text-color))];
}

.v-select .vs__dropdown-option--selected {
  @apply bg-primary text-white font-medium;
}

.v-select .vs__no-options {
  @apply px-3 py-3 text-[rgb(var(--fk-text-secondary-color))] italic text-center text-sm;
}

/* Hide the clear button since we set clearable to false */
.v-select .vs__clear {
  @apply hidden;
}

/* Ensure proper spacing and alignment */
.v-select .vs__dropdown-toggle {
  @apply px-3 py-2;
}

.v-select .vs__selected-options {
  @apply p-0 m-0;
}

.v-select .vs__actions {
  @apply px-1;
} 