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

@layer base {
  .link {
    @apply flex items-center gap-3 hover:text-azure-600 hover:bg-stone-200 font-medium rounded-[2rem] dark:hover:bg-haiti-600 dark:text-white;
  }

  .link.active {
    @apply text-azure-600 bg-white shadow-active hover:bg-stone-200 dark:bg-haiti-800 dark:text-white;
  }

  .link-neutral {
    @apply bg-zinc-50 dark:bg-haiti-700
  }

  .link-block {
    @apply px-7 py-7 flex flex-col justify-around items-center gap-2 text-sm flex-1 md:px-7 md:py-8;
  }
}