1 files changed, 90 insertions, 0 deletions
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
new file mode 100644
index 00000000..51388155
--- /dev/null
+++ b/src/components/menu_item.style.js
@@ -0,0 +1,90 @@
+export default {
+  name: 'MenuItem',
+  selector: '.menu-item',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Input',
+    'Border',
+    'ButtonUnstyled',
+    'Badge',
+    'Avatar'
+  ],
+  states: {
+    hover: ':hover',
+    active: '.-active'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '$mod(--bg, 5)',
+        opacity: 1
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        background: '$mod(--bg, 10)',
+        opacity: 1
+      }
+    },
+    {
+      state: ['active', 'hover'],
+      directives: {
+        background: '$mod(--bg, 15)',
+        opacity: 1
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    }
+  ]
+}