@layer components {
  .rui-nav-link {
    @apply text-[15px] font-medium py-3 px-4 text-gray-700 focus:text-primary-600 hover:text-primary-600 block relative
  hover:transition hover:duration-200 hover:ease-in-out dark:text-white dark:hover:text-zinc-300 dark:focus:text-white;
  }

  .rui-nav-link-active {
    @apply text-[15px] font-medium py-3 px-4 text-primary-500 hover:text-primary-500 relative hover:transition hover:duration-300 hover:ease-in-out dark:hover:text-primary-400 dark:text-primary-500/95;
  }

  .rui-admin-nav-link {
    @apply text-[15px] font-medium py-3 px-2 -mx-2 text-gray-700 focus:text-primary-600 hover:text-primary-600 block relative hover:transition hover:duration-200 hover:ease-in-out dark:focus:text-white hover:bg-gray-50/80 rounded transition dark:text-gray-200 dark:hover:bg-gray-800/70 dark:hover:text-white;
  }

  .rui-admin-nav-link.rui-nav-link-active {
    @apply relative text-primary-700 hover:text-primary-800 hover:transition hover:duration-300 hover:ease-in-out dark:text-primary-500/95 dark:hover:text-white dark:bg-gradient-to-r dark:from-primary-500/25 dark:text-white dark:hover:bg-primary-500/20 bg-gradient-to-r from-primary-500/10;
  }
}