fix(aio): fix ToC styling (#17110)

There seems to have been a bad rebase of #16228 on top of #16959, which affected
ToC styles from both PRs. This commit restores the horizontal line under `.h1`
elements and the vertical blue bar on the left-hand side of the ToC (with the
circle running along the bar to indicate the active section).

Fixes #17098

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

@@ -8,11 +8,6 @@
   overflow-x: hidden;
 }
 
-.toc-content {
-  border-left: 1px solid $lightgray;
-  margin-left: 8px;
-}
-
 aio-toc {
   &.embedded {
     @media (min-width: 801px) {
@@ -22,20 +17,15 @@ aio-toc {
 }
 
 .toc-inner {
-
-  &:not(.embedded) {
-    @media (max-width: 800px) {
-      border-left: 4px solid #4285f4;
-      display: none;
-    }
-  }
-}
-
-aio-toc > div {
   font-size: 13px;
   overflow-y: visible;
   padding: 4px 0 0 10px;
 
+  .toc-heading,
+  .toc-list .h1 {
+    font-size: 115%;
+  }
+
   .toc-heading {
     font-weight: 500;
     margin: 0 0 16px 8px;
@@ -43,7 +33,6 @@ aio-toc > div {
   }
 
   .toc-heading.secondary {
-    padding-bottom: 0;
     position: relative;
     top: -8px;
 
@@ -63,18 +52,12 @@ aio-toc > div {
     padding: 0;
     text-align: start;
 
-    &:focus.embedded {
+    &.embedded:focus {
       outline: none;
       background: $lightgray;
     }
   }
 
-  button.toc-heading,
-  div.toc-heading,
-  ul.toc-list li.h1 {
-    font-size: 115%;
-  }
-
   button.toc-heading {
     md-icon.rotating-icon {
       height: 18px;
@@ -89,7 +72,6 @@ aio-toc > div {
     }
   }
 
-
   button.toc-more-items {
     color: $mediumgray;
     top: 10px;
@@ -121,7 +103,7 @@ aio-toc > div {
   ul.toc-list {
     list-style-type: none;
     margin: 0;
-    padding: 0 8px;
+    padding: 0 8px 0 0;
 
     @media (max-width: 800px) {
       width: auto;
@@ -130,37 +112,29 @@ aio-toc > div {
   }
 
   ul.toc-list li {
+    box-sizing: border-box;
     font-size: 12px;
     line-height: 16px;
-    margin: 6px 0;
+    padding: 3px 0 3px 12px;
-    // padding: 0 16px;
     position: relative;
     transition: all 0.3s ease-in-out;
 
-    &.active {
+    &.h1:after {
-      a {
+      content: '';
-        color: $blue;
+      display: block;
-        font-weight: 500;
+      height: 1px;
+      width: 40%;
+      margin: 7px 0 4px 0;
+      background: #DBDBDB;
+      clear: both;
     }
 
-      &:before {
+    &.h1, &.h2, &.h3 {
-        content: '';
+      border-left: 1px solid $blue;
-        border-radius: 50%;
-        left: -16px;
-        top: 10px;
-        background: $blue;
-        position: absolute;
-        width: 6px;
-        height: 6px;
-      }
     }
 
     &.h3 {
-      margin-left: 8px;
+      padding-left: 24px;
-    }
-
-    &:last-child a:before {
-      width: 0;
     }
 
     a {
@@ -171,39 +145,30 @@ aio-toc > div {
       font-size: 12px;
       display: table-cell;
 
-
       &:hover {
         color: $accentblue;
       }
+    }
+
+    &.active {
+      a {
+        color: $blue;
+        font-weight: 500;
+      }
 
-      &.h2 {
       &:before {
         content: '';
-          left: -1px;
+        border-radius: 50%;
-          top: 10px;
+        left: -4px;
-          background: red;
+        top: 12px;
+        background: $blue;
         position: absolute;
-          display: block;
+        width: 6px;
-          width: 1px;
+        height: 6px;
-          height: calc(100% + 11px);
-        }
       }
     }
   }
 
-  // ul.toc-list li.h3 {
-  //   margin-left: 15px;
-  // }
-
-  // ul.toc-list li.h1:after {
-  //   content: "";
-  //   display: block;
-  //   height: 1px;
-  //   width: 40%;
-  //   margin: 24px 0px 10px;
-  //   background: #DBDBDB;
-  //   clear: both;
-  // }
 }
 
 aio-toc.embedded > div.collapsed li.secondary {