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/+/1710852Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#679323}

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

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

ui/webui/resources/cr_elements/shared_style_css.html

@@ -56,10 +56,6 @@
       [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;
@@ -68,8 +64,10 @@
       }
 
       [selectable]:focus,
-      [selectable] > :focus {
-        @apply --cr-selectable-focus;
+      [selectable] > :focus,
+      [scrollable] iron-list > :not(.no-outline):focus {
+        background-color: var(--cr-focused-item-color);
+        outline: none;
       }
       [selectable] > * {
         cursor: pointer;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -205,10 +205,6 @@
       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);