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,11 +3,15 @@
     .sidebar-section-header-button,
     .sidebar-section-header-caret,
     .sidebar-section-header-dropdown {
+      .discourse-no-touch & {
         opacity: 0;
         transition: opacity 0.25s;
         transition-delay: 0.5s;
       }
+    }
 
+    .discourse-no-touch & {
+      &:focus-within,
       &:hover {
         .sidebar-section-header-button,
         .sidebar-section-header-caret,
@@ -18,3 +22,4 @@
       }
     }
   }
+}

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);
+}