css: add styles for native details html element (#83376)

gadjo/static/css/_colors.scss

@@ -15,6 +15,7 @@ $pink: hsl(320, 70%, 60%);
 html {
 	--blue: #{$blue};
 	--blue-dusty: #{$blue-dusty};
+	--blue-dark: #{$blue-dark};
 	--cyan: #{$cyan};
 	--orange: #{$orange};
 	--red: #{$red};

gadjo/static/css/gadjo.scss

@@ -103,6 +103,35 @@ span.warning {
 	clear: both;
 }
 
+// details / summary
+details {
+	> summary {
+		cursor: pointer;
+		display: block;
+		font-weight: bold;
+		width: 100%;
+		position: relative;
+		margin: 1ex 0;
+		&::before {
+			content: "\f107"; // angle-down
+			display: inline-block;
+			font-family: FontAwesome;
+			font-size: 1.5em;
+			transform: rotate(-90deg);
+			transition: transform 0.2s ease;
+			vertical-align: middle;
+			margin-right: .33em;
+			color: var(--blue);
+		}
+		&:hover {
+			color: var(--blue-dark);
+		}
+	}
+	&[open] > summary::before {
+		transform: rotate(0);
+	}
+}
+
 
 /* from top to bottom */