refactor(docs-infra): move common `.symbol` styles to `_api-symbols.scss` (#40704)

The `.symbol` CSS class (which is primarily used to denote the type of
API symbols - classes, functions, interfaces, etc.) are used in several
places:
- In the API list page (with the corresponding styles defined in
  `_api-list.scss`).
- In search results (with the corresponding styles defined in
  `_errors.scss`).
- In error list page (with the corresponding styles defined in
  `search-results.scss`).
- In the `<aio-select>` component (with the corresponding styles defined
  in `_select-menu.scss`).

Previously, global styles for `.symbol` were defined in `_api-list.scss`
(i.e. the styles from `_api-list.scss` were also applied to `.symbol`
elements in other places/components). Also, some of the SCSS files
mentioned above defined some duplicate styles for `.symbol`.

This commit moves the `.symbol` styles to a new `_api-symbols.scss`
file, which contains common symbol-related styles.

PR Close #40704

aio/src/styles/2-modules/_api-list.scss

@@ -45,10 +45,6 @@ aio-api-list {
     @media screen and (max-width: 600px) {
       width: 100%;
     }
-
-    .symbol {
-      margin-right: 8px;
-    }
   }
 
   .form-select-menu,
@@ -104,10 +100,6 @@ aio-api-list {
       text-overflow: ellipsis;
       white-space: nowrap;
 
-      .symbol {
-        margin-right: 8px;
-      }
-
       a {
         color: $blue-grey-600;
         display: inline-block;
@@ -180,34 +172,6 @@ aio-api-list {
   }
 }
 
-/* API SYMBOLS */
-
-/* SYMBOL CLASS */
-
-.symbol {
-  border-radius: 2px;
-  box-shadow: 0 1px 2px rgba($black, .24);
-  color: $white;
-  display: inline-block;
-  @include font-size(10);
-  font-weight: 600;
-  @include line-height(16);
-  text-align: center;
-  width: 16px;
-
-  // SYMBOL TYPES
-  // Symbol mapping variables in *constants*
-  @each $name, $symbol in $api-symbols {
-    &.#{$name} {
-      background: map-get($symbol, background);
-
-      &:before {
-        content: map-get($symbol, content);
-      }
-    }
-  }
-}
-
 .code-anchor {
   cursor: pointer;
   text-decoration: none;

aio/src/styles/2-modules/_api-symbols.scss

@@ -0,0 +1,28 @@
+/* API SYMBOLS */
+
+/* SYMBOL CLASS */
+
+.symbol {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba($black, .24);
+  color: $white;
+  display: inline-block;
+  @include font-size(10);
+  font-weight: 600;
+  @include line-height(16);
+  margin-right: 8px;
+  text-align: center;
+  width: 16px;
+
+  // SYMBOL TYPES
+  // Symbol mapping variables in *constants*
+  @each $name, $symbol in $api-symbols {
+    &.#{$name} {
+      background: map-get($symbol, background);
+
+      &:before {
+        content: map-get($symbol, content);
+      }
+    }
+  }
+}

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

@@ -21,8 +21,6 @@
     white-space: nowrap;
 
     .symbol {
-      margin-right: 8px;
-
       &.runtime {
         background: $green-500;
       }
@@ -34,11 +32,11 @@
 
     .symbol.runtime:before {
       content: "R";
-    }  
-    
+    }
+
     .symbol.compiler:before {
       content: "C";
-    }  
+    }
 
     a {
       color: $blue-grey-600;
@@ -70,4 +68,4 @@
     width: 100%;
     height: 100%;
   }
-}
+}

aio/src/styles/2-modules/_modules-dir.scss

@@ -5,6 +5,7 @@
    @import 'alert';
    @import 'api-list';
    @import 'api-pages';
+   @import 'api-symbols';
    @import 'buttons';
    @import 'callout';
    @import 'card';

aio/src/styles/2-modules/_search-results.scss

@@ -51,10 +51,6 @@ aio-search-results {
           &:hover {
             color: $white;
           }
-
-          .symbol {
-            margin-right: 8px;
-          }
         }
 
         &.priority-pages {