[IMP] odoo_theme: toctrees-l1,l2 design improvement

Issue 1:
========
The toctrees in the documentation are visually inconsistent because of
the content. Sometimes we have titles that are also links and visually
collides with the rest of the toc making it hard to read. This applies
to toctree-l1 and toctree-l2.

Fix 1:
========
When we have a link and title toctree-l2 in a list containing other
nested toc, we apply another styling displaying it with the same color
as a title, but with an icon and hover behavior indicating that it is a
link. (This commit also changes the direction of the i-link icon to make
it standard).

Issue 2:
========
When we have only have toctree-l1 links without nested toc the toctree
is uselessly taking a lot of space.

Fix: 2
========

In these scenario we add a class to the toctree wrapper to replace the
toctree-l1 style with a toctree-l2.

task-3138525
task-3138563

part of

task-3059178

closes odoo/documentation#6506

X-original-commit: c62bf21987
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>

extensions/odoo_theme/static/style.scss

@@ -586,28 +586,42 @@ main.container-fluid {
 }
 
 .toctree-wrapper {
+    %toctree-custom-link {
+        > a:not([href="#"]){
+            --o-link-color: #{$o-gray-color};
+            --o-link-hover-color: #{$primary};
+
+            &:after {
+                content: ' #{$i-link}';
+                @include o-inline-icon(auto, baseline, 0.7em, $font-weight-bold);
+                color: $primary;
+            }
+        }
+    }
+
     > ul, .toctree-l1 > ul {
         padding-left: 0;
         list-style: none;
     }
 
-    .toctree-l1 > a {
-        display: block;
-        margin-top: $o-padding-m;
-        margin-bottom: $o-margin-s;
-        padding-bottom: $o-padding-xs;
-        border-bottom: 1px solid $o-gray-border;
-        @include font-size($h2-font-size);
-        font-weight: 600;
-    }
-
-    .toctree-l1 {
+    &:not(.o_toc_l1_to_l2) .toctree-l1 {
+        @extend %toctree-custom-link;
         margin-bottom: 2rem;
+
+        > a {
+            display: block;
+            margin-top: $o-padding-m;
+            margin-bottom: $o-margin-s;
+            padding-bottom: $o-padding-xs;
+            border-bottom: 1px solid $o-gray-border;
+            @include font-size($h2-font-size);
+            font-weight: $font-weight-bolder;
+        }
     }
 
-    .toctree-l2 > a[href="#"] {
-        margin-top: 0.7rem;
-        display: inline-block;
+    .toctree-l2.o_toc_contains_l3 {
+        margin-top: map-get($spacers, 3);
+        @extend %toctree-custom-link;
     }
 
     a[href="#"] {
@@ -616,6 +630,10 @@ main.container-fluid {
         pointer-events: none;
         cursor: default;
     }
+
+    .toctree-l3 > a {
+        --o-link-fontweight: #{$font-weight-medium};
+    }
 }
 
 article.doc-body {