implement list item styles

src/components/list/list.vue

@@ -7,6 +7,7 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
+      :class="getClass(item)"
       role="listitem"
     >
       <slot
@@ -33,24 +34,11 @@ export default {
     getKey: {
       type: Function,
       default: item => item.id
+    },
+    getClass: {
+      type: Function,
+      default: item => ''
     }
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../variables";
-
-.list {
-  &-item:not(:last-child) {
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
-}
-</style>

src/components/list/list_item.style.js

@@ -0,0 +1,48 @@
+export default {
+  name: 'ListItem',
+  selector: '.list-item',
+  states: {
+    active: '.-active',
+    hover: ':hover'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover', 'active'],
+      directives: {
+        background: '--inheritedBackground, 20',
+        opacity: 1
+      }
+    }
+  ]
+}