Tweak sonner css api

src/site/globals.css

@@ -103,12 +103,6 @@
       p-0 min-h-0
       border-none active:bg-transparent shadow-none
   }
-  /* Toasts */
-  .toaster [data-sonner-toast] {
-    @apply
-      font-mono font-normal
-      !border-gray-200 dark:!border-gray-800
-  }
   /* Common Utilities */
   .text-main {
     @apply

src/toast/ToasterWithThemes.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { cc } from '@/utility/css';
 import { useTheme } from 'next-themes';
 import { Toaster } from 'sonner';
 
@@ -8,7 +9,14 @@ export default function ToasterWithThemes() {
   return (
     <Toaster
       theme={theme as 'system' | 'light' | 'dark'}
-      className="toaster"
+      toastOptions={{
+        classNames: {
+          toast: cc(
+            'font-mono font-normal',
+            '!border-gray-200 dark:!border-gray-800',
+          ),
+        },
+      }}
     />
   );
 }