/* You can add global styles to this file, and also import other style files */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");

@import "tailwindcss";

@theme {
  /* This overrides the default 'sans' font stack with Geist */
  --font-sans:
    "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-space: "Space Grotesk", sans-serif;
}

body {
  @apply bg-gray-100;
}

.wrapper {
  @apply px-5 sm:px-15;
}

.btn {
  @apply rounded-full transition-all duration-200 font-medium ease-out flex justify-center active:translate-y-px disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-ghost {
  @apply text-gray-600 border border-gray-300 hover:bg-gray-800 hover:text-gray-200;
}

.btn-black {
  @apply text-gray-100 bg-gray-800 border border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
}

.card {
  @apply bg-gray-50 rounded-xl border border-gray-300 hover:border-gray-400 p-4 hover:shadow-xl transition-all duration-300 ease-in-out;
}

.fieldset {
  @apply space-y-1;
}
.fieldset-legend {
  @apply text-xs font-bold ml-2 text-gray-800;
}

.fieldset .label {
  @apply text-xs text-gray-400 ml-2;
}

.input {
  @apply p-3 border border-gray-300 rounded-xl text-sm w-full;
}

.dropdown {
  position-area: span-left bottom;
  @apply p-4 mt-2 border border-gray-300 shadow-lg rounded-xl space-y-2 text-gray-800;
}

.dropdown li {
  @apply rounded-lg hover:bg-linear-to-r hover:from-teal-300 hover:to-transparent px-5 py-1;
}