Updated button group styling

Lowered the specificity of selectors, shrinking the size of the framework somewhat.

dist/mini-dark.css

@@ -1009,18 +1009,8 @@ input[type="file"] {
   border-radius: 0;
 }
 
-.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
-.button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
-.button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
-.button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
-.button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
-.button-group .button + button,
-.button-group .button + [type="button"],
-.button-group .button + [type="submit"],
-.button-group .button + [type="reset"],
-.button-group .button + .button,
-.button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
-.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
+.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
+.button-group * + .button, .button-group * + [role="button"] {
   border-left: 1px solid #263238;
 }
 
@@ -1030,18 +1020,8 @@ input[type="file"] {
     -webkit-flex-direction: column;
     flex-direction: column;
   }
-  .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
-  .button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
-  .button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
-  .button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
-  .button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
-  .button-group .button + button,
-  .button-group .button + [type="button"],
-  .button-group .button + [type="submit"],
-  .button-group .button + [type="reset"],
-  .button-group .button + .button,
-  .button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
-  .button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
+  .button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
+  .button-group * + .button, .button-group * + [role="button"] {
     border: 0;
     border-top: 1px solid #263238;
   }

dist/mini-default.css

@@ -1008,18 +1008,8 @@ input[type="file"] {
   border-radius: 0;
 }
 
-.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
-.button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
-.button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
-.button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
-.button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
-.button-group .button + button,
-.button-group .button + [type="button"],
-.button-group .button + [type="submit"],
-.button-group .button + [type="reset"],
-.button-group .button + .button,
-.button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
-.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
+.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
+.button-group * + .button, .button-group * + [role="button"] {
   border-left: 1px solid #bdbdbd;
 }
 
@@ -1029,18 +1019,8 @@ input[type="file"] {
     -webkit-flex-direction: column;
     flex-direction: column;
   }
-  .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
-  .button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
-  .button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
-  .button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
-  .button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
-  .button-group .button + button,
-  .button-group .button + [type="button"],
-  .button-group .button + [type="submit"],
-  .button-group .button + [type="reset"],
-  .button-group .button + .button,
-  .button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
-  .button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
+  .button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
+  .button-group * + .button, .button-group * + [role="button"] {
     border: 0;
     border-top: 1px solid #bdbdbd;
   }

dist/mini-nord.css

@@ -1018,18 +1018,8 @@ input[type="file"] {
   box-shadow: none;
 }
 
-.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
-.button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
-.button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
-.button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
-.button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
-.button-group .button + button,
-.button-group .button + [type="button"],
-.button-group .button + [type="submit"],
-.button-group .button + [type="reset"],
-.button-group .button + .button,
-.button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
-.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
+.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
+.button-group * + .button, .button-group * + [role="button"] {
   border-left: 1px solid #9e9e9e;
 }
 
@@ -1039,18 +1029,8 @@ input[type="file"] {
     -webkit-flex-direction: column;
     flex-direction: column;
   }
-  .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
-  .button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
-  .button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
-  .button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
-  .button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
-  .button-group .button + button,
-  .button-group .button + [type="button"],
-  .button-group .button + [type="submit"],
-  .button-group .button + [type="reset"],
-  .button-group .button + .button,
-  .button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
-  .button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
+  .button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
+  .button-group * + .button, .button-group * + [role="button"] {
     border: 0;
     border-top: 1px solid #9e9e9e;
   }

dist/mini-sucroa.css

@@ -1005,18 +1005,8 @@ input[type="file"] {
   box-shadow: none;
 }
 
-.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
-.button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
-.button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
-.button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
-.button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
-.button-group .button + button,
-.button-group .button + [type="button"],
-.button-group .button + [type="submit"],
-.button-group .button + [type="reset"],
-.button-group .button + .button,
-.button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
-.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
+.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
+.button-group * + .button, .button-group * + [role="button"] {
   border-left: 1px solid #a9a2ba;
 }
 
@@ -1026,18 +1016,8 @@ input[type="file"] {
     -webkit-flex-direction: column;
     flex-direction: column;
   }
-  .button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
-  .button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
-  .button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
-  .button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
-  .button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
-  .button-group .button + button,
-  .button-group .button + [type="button"],
-  .button-group .button + [type="submit"],
-  .button-group .button + [type="reset"],
-  .button-group .button + .button,
-  .button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
-  .button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
+  .button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
+  .button-group * + .button, .button-group * + [role="button"] {
     border: 0;
     border-top: 1px solid #a9a2ba;
   }

docs/v2/DEVLOG.md

@@ -1085,3 +1085,4 @@
 - After working on `:active` redefinition, the size is now `6.53KB` gzipped (previously `6.71KB` gzipped).
 - Fixed a typo in `core`'s code, nothing was really affected, but it's nice to have it fixed.
 - Optimized certain pieces of code in the `grid` module, including the pre-defined layouts in shared rules, actually saving a little bit of space. Size is now `6.50KB`, a noticeable improvement over the previous size.
+- Dramatically improved `input_control`'s `.button-group` styling, by reworking the way the combinatory selectors (`element + element`) inside it work, based on the fact that we are just styling the last element and we don't care about what the previous one was. This shaved off quite a lot of size, shrinking `mini-default` down to `6.37KB`. **Hugging cat** is especially happy with this.

src/mini/_input_control.scss

@@ -12,6 +12,10 @@ $button-group-name:					'button-group' !default;// Class for button groups.
 // of the less specific, yet less complicated and less bloated input selector. This only applies to
 // the pseudo-classes and states of the <input> controls and not the default styling of them.
 $input-high-specificity-selectors:	false !default;	// [Hidden flag] Use legacy selectors for <input> element styling (`true`/`false`).
+// The below option will use the legacy high specificity selectors for <button> and button-like elements
+// instead of the less specific, yet less complicated and less bloated generic selector. This only applies
+// to the styling of consecutive elements.
+$button-group-high-specificity-selectors: false !default; // [Hidden flag] Use legacy selectors for button-like elements inside button groups (`false`/ `true`).
 $hide-file-inputs: 					true !default;					// Should `file` <input> elements be hidden? (`true`/`false`)
 $hide-check-and-radio:			true !default;					// [Hidden flag] Should checkboxes and radios be hidden? (`true`/`false`)
 // External variables' defaults are used only if you import this module on its own, without the rest of the framework.
@@ -327,16 +331,28 @@ a[role="button"], label[role="button"], [role="button"] {
 			@if $button-border-radius != 0 {
 				border-radius: 0;
 			}
-			@if $button-group-border-style != 0 {
-				+ button, + [type="button"], + [type="submit"], + [type="reset"],
-				+ .#{$button-class-name}, + [role="button"] {
-					border-left: $button-group-border-style;
+			@if $button-group-high-specificity-selectors {
+				@if $button-group-border-style != 0 {
+					+ button, + [type="button"], + [type="submit"], + [type="reset"],
+					+ .#{$button-class-name}, + [role="button"] {
+						border-left: $button-group-border-style;
+					}
 				}
 			}
 			@if $button-box-shadow != none {
 				box-shadow: none;
 			}
 		}
+		@if not $button-group-high-specificity-selectors {
+			@if $button-group-border-style != 0 {
+				* {
+					+ button, + [type="button"], + [type="submit"], + [type="reset"],
+					+ .#{$button-class-name}, + [role="button"] {
+						border-left: $button-group-border-style;
+					}
+				}
+			}
+		}
 	}
 	// Responsiveness for button groups
 	@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
@@ -346,13 +362,26 @@ a[role="button"], label[role="button"], [role="button"] {
 			// New syntax
 			-webkit-flex-direction: column;
 							flex-direction: column;
-			@if $button-group-border-style !=0 {
-				button, [type="button"], [type="submit"], [type="reset"],
-				.#{$button-class-name}, [role="button"] {
-					+ button, + [type="button"], + [type="submit"], + [type="reset"],
-					+ .#{$button-class-name}, + [role="button"] {
-						border: 0;
-						border-top: $button-group-border-style;
+			@if $button-group-high-specificity-selectors {
+				@if $button-group-border-style !=0 {
+					button, [type="button"], [type="submit"], [type="reset"],
+					.#{$button-class-name}, [role="button"] {
+						+ button, + [type="button"], + [type="submit"], + [type="reset"],
+						+ .#{$button-class-name}, + [role="button"] {
+							border: 0;
+							border-top: $button-group-border-style;
+						}
+					}
+				}
+			}
+			@else {
+				@if $button-group-border-style !=0 {
+					* {
+						+ button, + [type="button"], + [type="submit"], + [type="reset"],
+						+ .#{$button-class-name}, + [role="button"] {
+							border: 0;
+							border-top: $button-group-border-style;
+						}
 					}
 				}
 			}