@import "./pagy.tailwind.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer components {
  .btn {
    @apply text-sm font-medium px-4 py-2 rounded cursor-pointer flex items-center justify-center max-h-9 whitespace-nowrap transition-colors ease-in-out;
  }

  .btn-primary {
    @apply bg-cyan-500 text-white hover:bg-cyan-700 dark:bg-cyan-600 dark:hover:bg-cyan-800;
  }

  .btn-secondary {
    @apply bg-sky-500 text-white hover:bg-sky-700 dark:bg-sky-600 dark:hover:bg-sky-800;
  }

  .btn-light-gray {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600;
  }

	/* homepage buttons */
  .btn-ghost {
    @apply flex text-nowrap py-4 px-6 rounded-[99px] items-center justify-center gap-2.5 border border-[#4C4C4C] bg-white-12 text-white leading-[150%] tracking-[-0.48px] transition hover:brightness-150;
  }

	.btn-white {
		@apply flex text-nowrap py-4 px-6 rounded-[99px] justify-center items-center gap-2.5 bg-white text-black leading-[150%] tracking-[-0.48px] transition hover:opacity-90;
	}
}