Revert "WebUI: Remove --cr-list-item-focus and --cr-selectable-focus mixins"

This reverts commit f4a585a3.

Reason for revert: This CL causes failures of SettingsUIBrowserTest.All
The first failed build: https://ci.chromium.org/p/chromium/builders/ci/Linux%20CFI/14356

Original change's description:
> WebUI: Remove --cr-list-item-focus and --cr-selectable-focus mixins
> 
> This CL removes the unused --cr-list-item-focus mixin and moves all
> the CSS properties/values from --cr-selectable-focus to the only
> place where they were being used.
> 
> https://imgur.com/a/yFz9k61
> 
> Bug: 973674
> Change-Id: I95f93fcfee6dc7b77ce5180a7875a1b526f066e5
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1710852
> Reviewed-by: Hector Carmona <hcarmona@chromium.org>
> Commit-Queue: John Lee <johntlee@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#679323}

TBR=hcarmona@chromium.org,johntlee@chromium.org

# Not skipping CQ checks because original CL landed > 1 day ago.

Bug: 973674
Change-Id: I777671fc0d62f5a307a410c4d9b8b108aa5ef83d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1715691Reviewed-by: Maxim Kolosovskiy <kolos@chromium.org>
Commit-Queue: Maxim Kolosovskiy <kolos@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680430}

chrome/browser/resources/settings/chromeos/os_settings_menu/os_settings_menu.html

@@ -27,7 +27,7 @@
         -webkit-tap-highlight-color: transparent;
       }
 
-      /* Override CSS from cr_elements/shared_style_css.html. */
+      /* Override --cr-selectable-focus mixin. */
       [selectable]:focus,
       [selectable] > :focus {
         background-color: transparent;

ui/webui/resources/cr_elements/shared_style_css.html

@@ -56,6 +56,10 @@
       [scrollable].can-scroll:not(.scrolled-to-bottom) {
         border-bottom-color: var(--scrollable-border-color);
       }
+      [scrollable] iron-list > :not(.no-outline):focus {
+        @apply --cr-list-item-focus;
+        @apply --cr-selectable-focus;
+      }
 
       .scroll-container {
         display: flex;
@@ -64,10 +68,8 @@
       }
 
       [selectable]:focus,
-      [selectable] > :focus,
-      [scrollable] iron-list > :not(.no-outline):focus {
-        background-color: var(--cr-focused-item-color);
-        outline: none;
+      [selectable] > :focus {
+        @apply --cr-selectable-focus;
       }
       [selectable] > * {
         cursor: pointer;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -197,6 +197,10 @@
       padding: 10px 8px;
     }
 
+    --cr-selectable-focus: {
+      background-color: var(--cr-focused-item-color);
+      outline: none;
+    }
     --cr-separator-height: 1px;
     --cr-separator-line: var(--cr-separator-height) solid
         var(--cr-separator-color);