fix(docs-infra): fix code hover style in TOC (#31173)

Fixes #31170

PR Close #31173

aio/src/styles/2-modules/_toc.scss

@@ -6,23 +6,8 @@
   bottom: 12px;
   overflow-y: auto;
   overflow-x: hidden;
-}
-
-aio-toc.embedded {
-  @media (min-width: 801px) {
-    display: none;
-  }
 
   .toc-inner {
-    padding: 12px 0 0 0;
-
-    .toc-heading {
-      margin: 0 0 8px;
-    }
-  }
-}
-
-.toc-inner {
     @include font-size(13);
     overflow-y: visible;
     padding: 4px 0 0 10px;
@@ -36,15 +21,16 @@ aio-toc.embedded {
       font-weight: 500;
       margin: 0 0 16px 8px;
       padding: 0;
-  }
 
-  .toc-heading.secondary {
+      &.secondary {
         position: relative;
         top: -8px;
 
         &:hover {
           color: $accentblue;
         }
+
+      }
     }
 
     button.toc-heading,
@@ -86,24 +72,24 @@ aio-toc.embedded {
       &:hover {
         color: $accentblue;
       }
-  }
 
-  button.toc-more-items::after {
+      &::after {
         content: 'expand_less';
       }
 
-  button.toc-more-items.collapsed::after {
+      &.collapsed::after {
         content: 'more_horiz';
       }
+    }
 
-
-  .mat-icon.collapsed {
+    .mat-icon {
+      &.collapsed {
         @include rotate(0deg);
       }
 
-  .mat-icon:not(.collapsed) {
+      &:not(.collapsed) {
         @include rotate(90deg);
-    // margin: 4px;
+      }
     }
 
     ul.toc-list {
@@ -129,7 +115,7 @@ aio-toc.embedded {
           height: 1px;
           width: 40%;
           margin: 7px 0 4px 0;
-        background: #DBDBDB;
+          background: $lightgray;
           clear: both;
         }
 
@@ -144,12 +130,14 @@ aio-toc.embedded {
           display: table-cell;
         }
 
-      &:hover a {
+        &:hover {
+          * {
             color: $accentblue;
           }
+        }
 
         &.active {
-        a {
+          * {
             color: $blue;
             font-weight: 500;
 
@@ -197,9 +185,24 @@ aio-toc.embedded {
         }
       }
     }
-
+  }
 }
 
-aio-toc.embedded > div.collapsed li.secondary {
+// Alternative TOC View for Smaller Screens
+aio-toc.embedded {
+  @media (min-width: 801px) {
     display: none;
+  }
+
+  .toc-inner {
+    padding: 12px 0 0 0;
+
+    .toc-heading {
+      margin: 0 0 8px;
+    }
+  }
+
+  > div.collapsed li.secondary {
+    display: none;
+  }
 }