style: Update file formatting

Instead of repeating the element name to the class the declarations are now depended on the element itself.

elements/_embedded.scss

@@ -14,7 +14,6 @@
 // area
 
 
-
 picture {
 
 }

elements/_grouping.scss

@@ -25,6 +25,17 @@
 // div
 
 
+@mixin columns($count: 5) {
+	@for $i from 1 through $count {
+		.column_#{$i} {
+			@extend p;
+
+			column-count: #{$i};
+			column-gap: if($i < 3, config.$space_small, config.$space_medium);
+		}
+	}
+}
+
 
 // Paragraph
 // -----------------------------------------------------------------------------
@@ -32,32 +43,13 @@ p {
 	@extend %basic;
 	margin-top: config.$space_basic;
 	margin-bottom: config.$space_basic;
-
-	code {
-		padding: config.$space_tiny config.$space_half;
-		font-size: 1em;
-		line-height: 1;
-	}
 }
 
 .column_line {
 	column-rule: config.$border_basic;
 }
 
-.column_2,
+@include columns();
-.column_3 {
-	@extend p;
-}
-
-.column_2 {
-	column-count: 2;
-	column-gap: config.$space_small;
-}
-
-.column_3 {
-	column-count: 3;
-	column-gap: config.$space_medium;
-}
 
 // Address
 // -----------------------------------------------------------------------------
@@ -76,6 +68,19 @@ hr {
 	border-style: solid;
 	border-color: config.$color_border_basic;
 
+	&.hidden {
+		border-color: transparent;
+	}
+
+	&.dotted {
+		border-style: dotted;
+	}
+
+	&.double {
+		height: 4px;
+		border-width: config.$width_border_basic 0;
+	}
+
 	&.vertical {
 		display: inline;
 		margin: 0 config.$space_double;
@@ -83,22 +88,6 @@ hr {
 	}
 }
 
-.hr_hidden {
-	@extend hr;
-	border-color: transparent;
-}
-
-.hr_dotted {
-	@extend hr;
-	border-style: dotted;
-}
-
-.hr_double {
-	@extend hr;
-	height: 4px;
-	border-width: config.$width_border_basic 0;
-}
-
 // Preformat
 // -----------------------------------------------------------------------------
 pre {
@@ -248,11 +237,13 @@ figcaption {
 
 // Main content
 // -----------------------------------------------------------------------------
-main {}
+main {
+}
 
 // Div
 // -----------------------------------------------------------------------------
-div {}
+div {
+}
 
 .div_info {
 	padding: config.$space_double config.$indent_basic;
@@ -315,13 +306,13 @@ div {}
 	display: grid;
 	grid-gap: config.$space_basic;
 
-	&>input,
+	& > input,
-	&>select,
+	& > select,
-	&>textarea {
+	& > textarea {
 		margin: 0;
 	}
 
-	&>label {
+	& > label {
 		margin: config.$width_border_io;
 		padding: config.$space_half;
 	}

elements/_interactive.scss

@@ -21,7 +21,6 @@
 // legend
 
 
-
 // Form
 // -----------------------------------------------------------------------------
 form {
@@ -245,7 +244,6 @@ meter {
 }
 
 
-
 // Interactive elements
 // -----------------------------------------------------------------------------
 // details
@@ -253,7 +251,6 @@ meter {
 // dialog
 
 
-
 details {
 
 }
@@ -267,7 +264,6 @@ dialog {
 }
 
 
-
 // Scripting
 // -----------------------------------------------------------------------------
 // script
@@ -276,7 +272,6 @@ dialog {
 // canvas
 
 
-
 canvas {
 
 }

elements/_textlevel.scss

@@ -39,7 +39,6 @@
 // wbr
 
 
-
 // Links
 // -----------------------------------------------------------------------------
 a {
@@ -204,6 +203,12 @@ code {
 	background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
 }
 
+p code {
+	padding: config.$space_tiny config.$space_half;
+	font-size: 1em;
+	line-height: 1;
+}
+
 .code_solo {
 	@extend %basic_mono;
 	padding: config.$space_tiny config.$space_half;
@@ -296,14 +301,12 @@ wbr {
 }
 
 
-
 // Edits
 // -----------------------------------------------------------------------------
 // ins
 // del
 
 
-
 ins {
 
 }