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

@layer base {
  .link {
    @apply flex text-stone-600 items-center gap-3 hover:text-azure-600 hover:bg-stone-200 text-sm font-medium rounded-[2rem] dark:hover:bg-zeus-900 dark:text-zinc-500 cloudy:hover:bg-stone-200 cloudy:hover:text-black;
  }

  .link.active {
    @apply text-azure-600 bg-white shadow-active hover:bg-stone-200 dark:bg-stone-650 dark:text-white dark:shadow-active_dark cloudy:bg-white cloudy:text-black;
  }

  .link-neutral {
    @apply bg-zinc-50 dark:bg-stone-650 dark:text-white
  }

  .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;
  }

  .link.path_active {
    @apply bg-violet-400 text-white hover:bg-purple-400 hover:text-white dark:bg-zeus-800 dark:text-white;
  }
}