Add interaction styles for details/summary (flutter#10359)

These styles help make it more clear you're interacting with an
expandable details/summary tab, while also providing some spacing to the
contents of the expanded details.

Find an example near
https://flutter-docs-prod--pr10359-feat-new-details-style-i0iuss6t.web.app/testing/code-debugging#print-the-render-tree:~:text=tree%20and%20the-,sizes%20flow%20back%20up.,-Expand%20to%20view

src/_sass/base/_base.scss

@@ -290,6 +290,32 @@ blockquote {
   }
 }
 
+details {
+  margin-bottom: 0.75rem;
+
+  > summary {
+    font-weight: 500;
+    user-select: none;
+
+    &:hover {
+      color: $site-color-primary;
+    }
+  }
+
+  &[open] {
+    margin-bottom: unset;
+
+    > summary {
+      margin-bottom: 0.75rem;
+    }
+  }
+
+  > :not(:first-child) {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+  }
+}
+
 summary {
   margin-bottom: 1rem;
 }