feat(list): change from class to vars for styling

Author: adrianptrv

src/app/lists/list/list-item-selection/list-item-selection.component.scss

@@ -5,25 +5,25 @@
   igx-list-item:hover {
     cursor: pointer;
   }
+}
 
-  ::ng-deep {
-    .igx-list__item-base--selected .igx-list__item-content {
-      background-color: var(--ig-secondary-500);
-    }
-  }
+.list-sample {
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+}
 
-  .list-sample {
-    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
-      0px 1px 1px 0px rgba(0, 0, 0, 0.14),
-      0px 2px 1px -1px rgba(0, 0, 0, 0.12);
-  }
+igx-icon {
+  cursor: pointer;
+  position: relative;
+}
 
-  igx-icon {
-    cursor: pointer;
-    position: relative;
-  }
+.search {
+  margin-bottom: 16px;
+}
 
-  .search {
-    margin-bottom: 16px;
-  }
+igx-list-item {
+  --item-background-selected: var(--ig-secondary-500);
+  --item-title-color-selected: var(--ig-secondary-500-contrast);
+  --item-subtitle-color-selected: var(--ig-info-100);
 }