@tailwind base;
@tailwind components;
@tailwind utilities;

.formbricks-form {
  @apply space-y-3;
}

.formbricks-label {
  @apply text-base font-medium text-slate-700 font-sans sm:text-sm;
}

button.formbricks-input {
  @apply my-2 inline-flex items-center rounded-md border border-transparent bg-slate-600 px-3 py-2 text-base font-medium leading-4 text-white shadow-sm hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 sm:text-sm;
}

input[type="text"].formbricks-input,
input[type="number"].formbricks-input,
input[type="email"].formbricks-input,
input[type="password"].formbricks-input,
input[type="search"].formbricks-input,
input[type="tel"].formbricks-input,
input[type="url"].formbricks-input {
  @apply form-input text-base block rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
}

input[type="radio"].formbricks-input {
  @apply h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-500 mr-2;
}

textarea.formbricks-input {
  @apply form-textarea text-base font-sans block rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm;
}

.formbricks-help {
  @apply font-sans text-base sm:text-sm text-slate-500;
}

.formbricks-prefix-icon {
  @apply font-sans inline h-4 w-4 -ml-1 mr-2;
}

.formbricks-messages {
  @apply m-0 p-0 list-none;
}

.formbricks-message {
  @apply font-sans text-base sm:text-sm text-red-500;
}

.formbricks-legend {
  @apply text-base font-medium text-slate-700 font-sans sm:text-sm;
}

.formbricks-fieldset {
  @apply border-slate-50 rounded-lg  max-w-md;
}

.formbricks-input-nps {
  @apply flex cursor-pointer items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase focus:outline-none sm:flex-1;
}

[data-type="nps"] .formbricks-options {
  @apply grid grid-cols-11 gap-1 sm:grid-cols-11 mt-2;
}

[data-type="nps"] .formbricks-option[aria-checked="true"] {
  @apply border-transparent bg-slate-600 text-white hover:bg-slate-700;
}

[data-type="nps"] .formbricks-option {
  @apply flex cursor-pointer items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase focus:outline-none sm:flex-1;
}

[data-type="nps"] .formbricks-input-addition {
  @apply flex items-center justify-between mt-1;
}

[data-type="nps"] .formbricks-input-addition-item {
  @apply text-xs text-slate-500;
}
