feat: added disabled tools

src/app/page.css.ts

@@ -1,25 +1,15 @@
-import { style } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 import { theme } from '../stitches.config';
 
-export const tool = style({
-  height: 128,
-  minWidth: 256,
-  flex: 1,
-  borderRadius: 8,
-  textDecoration: 'none',
-  backgroundSize: 'cover',
-  backgroundPosition: 'center',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  justifyContent: 'flex-end',
-  padding: 16,
-  gap: 4,
-  boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
-  transition: `box-shadow ${theme.durations.regular}`,
+export const tool = styleVariants({
+  enabled: {
+    boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
 
-  ':hover': {
-    boxShadow: `inset 0 -128px 128px -128px ${theme.colors.appBackground1}`,
+    ':hover': {
+      boxShadow: `inset 0 -160px 128px -128px ${theme.colors.appBackground1}`,
+    },
+  },
+  disabled: {
+    boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
   },
 });