fix bad highlighting of selected nodes when using keyboard navigation

src/presentation/styles/tree.scss

@@ -2,37 +2,27 @@
 @import "@/presentation/styles/colors.scss";
 
 .tree {
-    background-color: $slate;
-}
-
-.tree-node > .tree-content > .tree-anchor > span {
-    color: $white !important;
-    text-transform: uppercase;
-    color: $light-gray;
-    font-size: 1.5em;
-}
-
-.tree-node {
+    background: $slate;
+    &-node { 
         white-space: normal !important;
-}
-
-.tree-arrow.has-child {
-    &.rtl:after, &:after {
-        border-color: $white !important;
-    }
-}
-
-.tree-node.selected > .tree-content {
+        > .tree-content {
             > .tree-anchor > span {
-        font-weight: bolder;
+                color: $white;
+                text-transform: uppercase;
+                font-size: 1.5em;
             }
-}
-
-.tree-content:hover {
+            &:hover {
                 background: $dark-gray !important;
-}
-
-.tree-checkbox {
+            }
+        }
+        &.selected { // When using keyboard navigation it higlights current item and its child items
+             background: $gray;
+            .tree-text {
+                color: $black !important;
+            }
+        }
+    }
+    &-checkbox {
         &.checked {
             background: $accent !important;
         }
@@ -40,4 +30,12 @@
             border-color: $gray !important;
         }
         background: $dark-slate !important;
+    }
+    &-arrow {
+        &.has-child {
+            &.rtl:after, &:after {
+                border-color: $white !important;
+            }
+        }
+    }
 }