@reference "tailwindcss";

.thom-input {
  @apply w-full rounded-md border bg-white text-black px-3 py-2 text-sm pr-10 appearance-none focus:outline-none disabled:cursor-not-allowed disabled:opacity-75;
  border-color: var(--color-border);
}

[data-theme="dark"] .thom-input {
  @apply bg-[#242424] text-white/75;
}

.thom-input::placeholder {
  @apply text-black/75;
}

[data-theme="dark"] .thom-input::placeholder {
  @apply text-white/75;
}

.thom-input-error {
  @apply border-red-500 text-red-500 focus:border-red-600;
}
[data-theme="dark"] .thom-input-error {
  @apply text-red-400 focus:border-red-500;
}

.thom-input-success {
  @apply border-emerald-500 text-emerald-500 focus:border-emerald-600;
}
[data-theme="dark"] .thom-input-success {
  @apply text-emerald-400 focus:border-emerald-500;
}

.thom-input-info {
  @apply border-blue-500 text-blue-500 focus:border-blue-600;
}
[data-theme="dark"] .thom-input-info {
  @apply text-blue-400 focus:border-blue-500;
}