.btn {
  @apply inline-flex items-center justify-center gap-2 font-semibold rounded-lg px-6 py-3 mt-3 text-base transition-all duration-200 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-[--f-header] focus-visible:ring-offset-2 focus-visible:ring-offset-[--f-background];
}

.btn-primary {
  @apply border border-transparent bg-[--btn-background] text-[--btn-text];
}

.btn-outline{
  @apply border-2;
  border-color: rgba(148, 163, 184, 0.08);

}

.btn-primary:hover {
  @apply bg-[--btn-background-hover] text-[--btn-text-hover];
}

.btn-primary:disabled {
  @apply opacity-60 cursor-not-allowed;
}

.f-input {
  @apply w-full py-3 px-4 rounded-xl border border-[--f-input-border] bg-[--f-background] text-[--f-text] transition-all duration-200;
}

.f-input:hover {
  @apply border-[--f-text] opacity-[0.4];
}

.f-input:focus {
  @apply outline-none border-[--f-header];
}

.f-input::placeholder {
  color: color-mix(in srgb, var(--f-text) 40%, transparent);
}

.f-input-error {
  @apply border-red-500 ring-2 ring-red-500/30;
}

.autocomplete-wrapper {
  @apply relative;
}

.autocomplete-open {
  @apply rounded-b-none border-b-0;
}

.autocomplete-list {
  @apply absolute left-0 right-0 z-50 bg-[--f-background] text-[--f-text] border border-[--f-input-border] rounded-b-xl shadow-xl max-h-56 overflow-auto;

  border-top: none;
  animation: fadeIn 0.12s ease-out;
}

.autocomplete-list li {
  @apply px-4 py-2 cursor-pointer transition-colors;
}

.autocomplete-list li:hover,
.autocomplete-list li.active {
  @apply bg-[--f-autocomplete-hover-bg] text-[--f-autocomplete-hover-text];
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}