Refactor pe-details SCSS

Use placeholder class for readability

src/js/sass/includes/_details.scss

@@ -6,11 +6,12 @@
 /* details polyfill */
 
 /* <details> and <summary> are block level elements */
-details, summary { 
+%pe-details-display-block { 
     display: block;
 }
 
 summary {
+	@extend %pe-details-display-block;
 	cursor: pointer; /* Apply a pointer cursor upon hover to indicate it’s a clickable element. These styles can be applied regardless of whether the fallback is needed */
 	&:hover, &:focus, &:active { /* Add focus styles (for keyboard accessibility) */
 		background: #ddd; 
@@ -19,33 +20,52 @@ summary {
 
 /* Only get applied if JavaScript is enabled and <details> is not natively supported */
 details {
+	@extend %pe-details-display-block;
 	&.polyfill { 
-		> summary:before { /* Add the close pointer */
-			content: "\25BA\a0";
+		> {
+			summary {
+				&:before { /* Add the close pointer */
+					content: "\25BA\a0";
+				}
+			}
 		}
-		&.open > summary:before { /* Add the open pointer */
-			content: "\25BC\a0";
+		&.open {
+			> {
+				summary {
+					&:before { /* Add the open pointer */
+						content: "\25BC\a0";
+					}
+				}
+			}
 		}
 	}
 	summary { /* Make sure summary remains visible */
 		display: block;
 		background: transparent
 	}
-	> * {
-		display: none;
+	> {
+		* {
+			display: none;
+		}
 	}
 }
 
 .detailssummary {
 	details {
-		> * { /* Show the details content for browsers that natively support it. */
-			display: block;
+		> {
+			* { /* Show the details content for browsers that natively support it. */
+				display: block;
+			}
 		}
 	}
 }
 
 .pe-disable {
-	details > * {
-		display: block;
+	details {
+		> {
+			* {
+				display: block;
+			}
+		}
 	}
 }