Different color for active item

components/lib/cascadeselect/CascadeSelectSub.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
+    <ul :ref="containerRef" :class="cx('rootList')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -34,12 +34,13 @@ const classes = {
         }
     ],
     wrapper: 'p-cascadeselect-items-wrapper',
-    list: 'p-cascadeselect-panel p-cascadeselect-items',
+    rootList: 'p-cascadeselect-items',
     item: ({ instance, processedOption }) => [
         'p-cascadeselect-item',
         {
             'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
-            'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
+            'p-cascadeselect-item-active': instance.isOptionActive(processedOption),
+            'p-highlight': instance.isOptionSelected(processedOption),
             'p-focus': instance.isOptionFocused(processedOption),
             'p-disabled': instance.isOptionDisabled(processedOption)
         }
@@ -47,7 +48,7 @@ const classes = {
     content: 'p-cascadeselect-item-content',
     text: 'p-cascadeselect-item-text',
     groupIcon: 'p-cascadeselect-group-icon',
-    sublist: 'p-cascadeselect-sublist'
+    sublist: 'p-cascadeselect-panel p-cascadeselect-sublist'
 };
 
 export default BaseStyle.extend({

components/lib/themes/primeone/base/cascadeselect/index.js

@@ -159,6 +159,8 @@ export default {
 
 .p-cascadeselect-item-active {
     overflow: visible;
+    background: ${dt('cascadeselect.item.focus.background')};
+    color: ${dt('cascadeselect.item.focus.color')};
 }
 
 .p-cascadeselect-item-active > .p-cascadeselect-sublist {