chore(button): Revert selectors

css/pico.classless.css

@@ -868,7 +868,11 @@ button {
   text-decoration: none;
 }
 
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
+button,
+input[type=submit],
+input[type=button],
+input[type=reset],
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -887,13 +891,21 @@ button {
   cursor: pointer;
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
+button:is([aria-current], :hover, :active, :focus),
+input[type=submit]:is([aria-current], :hover, :active, :focus),
+input[type=button]:is([aria-current], :hover, :active, :focus),
+input[type=reset]:is([aria-current], :hover, :active, :focus),
+[role=button]:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--primary-hover);
   --border-color: var(--primary-hover);
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
   --color: var(--primary-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):focus {
+button:focus,
+input[type=submit]:focus,
+input[type=button]:focus,
+input[type=reset]:focus,
+[role=button]:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--primary-focus);
 }

css/pico.css

@@ -925,7 +925,11 @@ button {
   text-decoration: none;
 }
 
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
+button,
+input[type=submit],
+input[type=button],
+input[type=reset],
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -944,64 +948,124 @@ button {
   cursor: pointer;
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
+button:is([aria-current], :hover, :active, :focus),
+input[type=submit]:is([aria-current], :hover, :active, :focus),
+input[type=button]:is([aria-current], :hover, :active, :focus),
+input[type=reset]:is([aria-current], :hover, :active, :focus),
+[role=button]:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--primary-hover);
   --border-color: var(--primary-hover);
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
   --color: var(--primary-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):focus {
+button:focus,
+input[type=submit]:focus,
+input[type=button]:focus,
+input[type=reset]:focus,
+[role=button]:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--primary-focus);
 }
 
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary {
+button.secondary,
+input[type=submit].secondary,
+input[type=button].secondary,
+input[type=reset],
+[role=button].secondary {
   --background-color: var(--secondary);
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   cursor: pointer;
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:is([aria-current], :hover, :active, :focus) {
+button.secondary:is([aria-current], :hover, :active, :focus),
+input[type=submit].secondary:is([aria-current], :hover, :active, :focus),
+input[type=button].secondary:is([aria-current], :hover, :active, :focus),
+input[type=reset]:is([aria-current], :hover, :active, :focus),
+[role=button].secondary:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
   --color: var(--secondary-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:focus {
+button.secondary:focus,
+input[type=submit].secondary:focus,
+input[type=button].secondary:focus,
+input[type=reset]:focus,
+[role=button].secondary:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast {
+
+button.contrast,
+input[type=submit].contrast,
+input[type=button].contrast,
+input[type=reset].contrast,
+[role=button].contrast {
   --background-color: var(--contrast);
   --border-color: var(--contrast);
   --color: var(--contrast-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
+button.contrast:is([aria-current], :hover, :active, :focus),
+input[type=submit].contrast:is([aria-current], :hover, :active, :focus),
+input[type=button].contrast:is([aria-current], :hover, :active, :focus),
+input[type=reset].contrast:is([aria-current], :hover, :active, :focus),
+[role=button].contrast:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
   --color: var(--contrast-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:focus {
+button.contrast:focus,
+input[type=submit].contrast:focus,
+input[type=button].contrast:focus,
+input[type=reset].contrast:focus,
+[role=button].contrast:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--contrast-focus);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline {
+
+button.outline,
+input[type=submit].outline,
+input[type=button].outline,
+input[type=reset].outline,
+[role=button].outline {
   --background-color: transparent;
   --color: var(--primary);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline:is([aria-current], :hover, :active, :focus) {
+button.outline:is([aria-current], :hover, :active, :focus),
+input[type=submit].outline:is([aria-current], :hover, :active, :focus),
+input[type=button].outline:is([aria-current], :hover, :active, :focus),
+input[type=reset].outline:is([aria-current], :hover, :active, :focus),
+[role=button].outline:is([aria-current], :hover, :active, :focus) {
   --background-color: transparent;
   --color: var(--primary-hover);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary {
+
+button.outline.secondary,
+input[type=submit].outline.secondary,
+input[type=button].outline.secondary,
+input[type=reset].outline.secondary,
+[role=button].outline.secondary {
   --color: var(--secondary);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus) {
+button.outline.secondary:is([aria-current], :hover, :active, :focus),
+input[type=submit].outline.secondary:is([aria-current], :hover, :active, :focus),
+input[type=button].outline.secondary:is([aria-current], :hover, :active, :focus),
+input[type=reset].outline.secondary:is([aria-current], :hover, :active, :focus),
+[role=button].outline.secondary:is([aria-current], :hover, :active, :focus) {
   --color: var(--secondary-hover);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast {
+
+button.outline.contrast,
+input[type=submit].outline.contrast,
+input[type=button].outline.contrast,
+input[type=reset].outline.contrast,
+[role=button].outline.contrast {
   --color: var(--contrast);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
+button.outline.contrast:is([aria-current], :hover, :active, :focus),
+input[type=submit].outline.contrast:is([aria-current], :hover, :active, :focus),
+input[type=button].outline.contrast:is([aria-current], :hover, :active, :focus),
+input[type=reset].outline.contrast:is([aria-current], :hover, :active, :focus),
+[role=button].outline.contrast:is([aria-current], :hover, :active, :focus) {
   --color: var(--contrast-hover);
 }
 

css/pico.fluid.classless.css

@@ -838,7 +838,11 @@ button {
   text-decoration: none;
 }
 
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
+button,
+input[type=submit],
+input[type=button],
+input[type=reset],
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -857,13 +861,21 @@ button {
   cursor: pointer;
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
+button:is([aria-current], :hover, :active, :focus),
+input[type=submit]:is([aria-current], :hover, :active, :focus),
+input[type=button]:is([aria-current], :hover, :active, :focus),
+input[type=reset]:is([aria-current], :hover, :active, :focus),
+[role=button]:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--primary-hover);
   --border-color: var(--primary-hover);
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
   --color: var(--primary-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):focus {
+button:focus,
+input[type=submit]:focus,
+input[type=button]:focus,
+input[type=reset]:focus,
+[role=button]:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--primary-focus);
 }

css/pico.slim.css

@@ -854,7 +854,11 @@ button {
   text-decoration: none;
 }
 
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
+button,
+input[type=submit],
+input[type=button],
+input[type=reset],
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -872,64 +876,124 @@ button {
   text-align: center;
   cursor: pointer;
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
+button:is([aria-current], :hover, :active, :focus),
+input[type=submit]:is([aria-current], :hover, :active, :focus),
+input[type=button]:is([aria-current], :hover, :active, :focus),
+input[type=reset]:is([aria-current], :hover, :active, :focus),
+[role=button]:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--primary-hover);
   --border-color: var(--primary-hover);
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
   --color: var(--primary-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):focus {
+button:focus,
+input[type=submit]:focus,
+input[type=button]:focus,
+input[type=reset]:focus,
+[role=button]:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--primary-focus);
 }
 
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary {
+button.secondary,
+input[type=submit].secondary,
+input[type=button].secondary,
+input[type=reset],
+[role=button].secondary {
   --background-color: var(--secondary);
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   cursor: pointer;
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:is([aria-current], :hover, :active, :focus) {
+button.secondary:is([aria-current], :hover, :active, :focus),
+input[type=submit].secondary:is([aria-current], :hover, :active, :focus),
+input[type=button].secondary:is([aria-current], :hover, :active, :focus),
+input[type=reset]:is([aria-current], :hover, :active, :focus),
+[role=button].secondary:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
   --color: var(--secondary-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:focus {
+button.secondary:focus,
+input[type=submit].secondary:focus,
+input[type=button].secondary:focus,
+input[type=reset]:focus,
+[role=button].secondary:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast {
+
+button.contrast,
+input[type=submit].contrast,
+input[type=button].contrast,
+input[type=reset].contrast,
+[role=button].contrast {
   --background-color: var(--contrast);
   --border-color: var(--contrast);
   --color: var(--contrast-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
+button.contrast:is([aria-current], :hover, :active, :focus),
+input[type=submit].contrast:is([aria-current], :hover, :active, :focus),
+input[type=button].contrast:is([aria-current], :hover, :active, :focus),
+input[type=reset].contrast:is([aria-current], :hover, :active, :focus),
+[role=button].contrast:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
   --color: var(--contrast-inverse);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:focus {
+button.contrast:focus,
+input[type=submit].contrast:focus,
+input[type=button].contrast:focus,
+input[type=reset].contrast:focus,
+[role=button].contrast:focus {
   --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
     0 0 0 var(--outline-width) var(--contrast-focus);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline {
+
+button.outline,
+input[type=submit].outline,
+input[type=button].outline,
+input[type=reset].outline,
+[role=button].outline {
   --background-color: transparent;
   --color: var(--primary);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline:is([aria-current], :hover, :active, :focus) {
+button.outline:is([aria-current], :hover, :active, :focus),
+input[type=submit].outline:is([aria-current], :hover, :active, :focus),
+input[type=button].outline:is([aria-current], :hover, :active, :focus),
+input[type=reset].outline:is([aria-current], :hover, :active, :focus),
+[role=button].outline:is([aria-current], :hover, :active, :focus) {
   --background-color: transparent;
   --color: var(--primary-hover);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary {
+
+button.outline.secondary,
+input[type=submit].outline.secondary,
+input[type=button].outline.secondary,
+input[type=reset].outline.secondary,
+[role=button].outline.secondary {
   --color: var(--secondary);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus) {
+button.outline.secondary:is([aria-current], :hover, :active, :focus),
+input[type=submit].outline.secondary:is([aria-current], :hover, :active, :focus),
+input[type=button].outline.secondary:is([aria-current], :hover, :active, :focus),
+input[type=reset].outline.secondary:is([aria-current], :hover, :active, :focus),
+[role=button].outline.secondary:is([aria-current], :hover, :active, :focus) {
   --color: var(--secondary-hover);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast {
+
+button.outline.contrast,
+input[type=submit].outline.contrast,
+input[type=button].outline.contrast,
+input[type=reset].outline.contrast,
+[role=button].outline.contrast {
   --color: var(--contrast);
 }
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
+button.outline.contrast:is([aria-current], :hover, :active, :focus),
+input[type=submit].outline.contrast:is([aria-current], :hover, :active, :focus),
+input[type=button].outline.contrast:is([aria-current], :hover, :active, :focus),
+input[type=reset].outline.contrast:is([aria-current], :hover, :active, :focus),
+[role=button].outline.contrast:is([aria-current], :hover, :active, :focus) {
   --color: var(--contrast-hover);
 }
 

scss/content/_button.scss

@@ -39,7 +39,11 @@ button {
   text-decoration: none;
 }
 
-:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+[role="button"] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -80,72 +84,91 @@ button {
 // .secondary, .contrast & .outline
 @if $enable-classes {
 
-  :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
+  //:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
     
-    // Secondary
+  // Secondary
-    &.secondary {
+  button.secondary,
-      --background-color: var(--secondary);
+  input[type="submit"].secondary,
-      --border-color: var(--secondary);
+  input[type="button"].secondary,
+  input[type="reset"],
+  [role="button"].secondary {
+    --background-color: var(--secondary);
+    --border-color: var(--secondary);
+    --color: var(--secondary-inverse);
+    cursor: pointer;
+
+    &:is([aria-current], :hover, :active, :focus) {
+      --background-color: var(--secondary-hover);
+      --border-color: var(--secondary-hover);
       --color: var(--secondary-inverse);
-      cursor: pointer;
-  
-      &:is([aria-current], :hover, :active, :focus) {
-        --background-color: var(--secondary-hover);
-        --border-color: var(--secondary-hover);
-        --color: var(--secondary-inverse);
-      }
-  
-      &:focus {
-        --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-          0 0 0 var(--outline-width) var(--secondary-focus);
-      }
     }
 
-    // Contrast
+    &:focus {
-    &.contrast {
+      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-      --background-color: var(--contrast);
+        0 0 0 var(--outline-width) var(--secondary-focus);
-      --border-color: var(--contrast);
+    }
+  }
+
+  // Contrast
+  button.contrast,
+  input[type="submit"].contrast,
+  input[type="button"].contrast,
+  input[type="reset"].contrast,
+  [role="button"].contrast {
+    --background-color: var(--contrast);
+    --border-color: var(--contrast);
+    --color: var(--contrast-inverse);
+
+    &:is([aria-current], :hover, :active, :focus) {
+      --background-color: var(--contrast-hover);
+      --border-color: var(--contrast-hover);
       --color: var(--contrast-inverse);
-  
-      &:is([aria-current], :hover, :active, :focus) {
-        --background-color: var(--contrast-hover);
-        --border-color: var(--contrast-hover);
-        --color: var(--contrast-inverse);
-      }
-  
-      &:focus {
-        --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
-          0 0 0 var(--outline-width) var(--contrast-focus);
-      }
     }
 
-    // Outline (primary)
+    &:focus {
-    &.outline {
+      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+        0 0 0 var(--outline-width) var(--contrast-focus);
+    }
+  }
+
+  // Outline (primary)
+  button.outline,
+  input[type="submit"].outline,
+  input[type="button"].outline,
+  input[type="reset"].outline,
+  [role="button"].outline {
+    --background-color: transparent;
+    --color: var(--primary);
+
+    &:is([aria-current], :hover, :active, :focus) {
       --background-color: transparent;
-      --color: var(--primary);
+      --color: var(--primary-hover);
-
-      &:is([aria-current], :hover, :active, :focus) {
-        --background-color: transparent;
-        --color: var(--primary-hover);
-      }
     }
+  }
 
-    // Outline (secondary)
+  // Outline (secondary)
-    &.outline.secondary {
+  button.outline.secondary,
-      --color: var(--secondary);
+  input[type="submit"].outline.secondary,
+  input[type="button"].outline.secondary,
+  input[type="reset"].outline.secondary,
+  [role="button"].outline.secondary {
+    --color: var(--secondary);
 
-      &:is([aria-current], :hover, :active, :focus) {
+    &:is([aria-current], :hover, :active, :focus) {
-        --color: var(--secondary-hover);
+      --color: var(--secondary-hover);
-      }
     }
+  }
 
-    // Outline (contrast)
+  // Outline (contrast)
-    &.outline.contrast {
+  button.outline.contrast,
-      --color: var(--contrast);
+  input[type="submit"].outline.contrast,
+  input[type="button"].outline.contrast,
+  input[type="reset"].outline.contrast,
+  [role="button"].outline.contrast {
+    --color: var(--contrast);
 
-      &:is([aria-current], :hover, :active, :focus) {
+    &:is([aria-current], :hover, :active, :focus) {
-        --color: var(--contrast-hover);
+      --color: var(--contrast-hover);
-      }
     }
   }
 }