UX: sidebar focus styles, remove hover for touch (#17713)

app/assets/stylesheets/common/base/sidebar-more-section-links.scss

@@ -3,16 +3,23 @@
 
   .sidebar-more-section-links-details-summary {
     padding: 0.35em 0.5em;
-    color: var(--tertiary);
+    color: var(--primary-high);
     font-size: var(--font-down-1);
     transition: background-color 0.25s;
+    display: flex;
+    align-items: center;
+    list-style: none;
 
+    .d-icon {
+      margin-left: auto;
+      color: var(--primary-medium);
+    }
+
+    &:focus,
     &:hover {
       background: var(--d-sidebar-highlight-color);
     }
 
-    list-style: none;
-
     &::before {
       display: none;
     }

app/assets/stylesheets/desktop/sidebar-section.scss

@@ -3,17 +3,22 @@
     .sidebar-section-header-button,
     .sidebar-section-header-caret,
     .sidebar-section-header-dropdown {
-      opacity: 0;
+      .discourse-no-touch & {
-      transition: opacity 0.25s;
+        opacity: 0;
-      transition-delay: 0.5s;
+        transition: opacity 0.25s;
+        transition-delay: 0.5s;
+      }
     }
 
-    &:hover {
+    .discourse-no-touch & {
-      .sidebar-section-header-button,
+      &:focus-within,
-      .sidebar-section-header-caret,
+      &:hover {
-      .sidebar-section-header-dropdown {
+        .sidebar-section-header-button,
-        opacity: 1;
+        .sidebar-section-header-caret,
-        transition-delay: 0s;
+        .sidebar-section-header-dropdown {
+          opacity: 1;
+          transition-delay: 0s;
+        }
       }
     }
   }

app/assets/stylesheets/mobile/sidebar.scss

@@ -16,3 +16,8 @@
   margin-right: 0;
   padding-left: 0.25em;
 }
+
+.sidebar-more-section-links-details
+  .sidebar-more-section-links-details-summary {
+  font-size: var(--font-0);
+}