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

@layer components {
  .btn-primary {
    @apply relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold;
    @apply px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6;
    @apply focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500;
    @apply disabled:opacity-50;
    @apply border-transparent;
    @apply text-white bg-blue-600 hover:bg-blue-700;
    @apply before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)];
    @apply before:shadow-sm;
    @apply after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)];
    @apply after:shadow-[inset_0_1px_theme(colors.white/15%)];
    @apply hover:after:bg-white/10 active:after:bg-white/10;
    @apply dark:bg-blue-600 dark:hover:bg-blue-700;
  }
  
  .link-secondary {
    @apply text-zinc-700 underline decoration-zinc-700/50 hover:text-zinc-950 hover:decoration-zinc-950;
    @apply dark:text-zinc-300 dark:decoration-zinc-300/50 dark:hover:text-white dark:hover:decoration-white;
  }
}