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,10 +84,14 @@ 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 {
+  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);
@@ -102,7 +110,11 @@ button {
   }
 
   // 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);
@@ -120,7 +132,11 @@ button {
   }
 
   // Outline (primary)
-    &.outline {
+  button.outline,
+  input[type="submit"].outline,
+  input[type="button"].outline,
+  input[type="reset"].outline,
+  [role="button"].outline {
     --background-color: transparent;
     --color: var(--primary);
 
@@ -131,7 +147,11 @@ button {
   }
 
   // Outline (secondary)
-    &.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);
 
     &:is([aria-current], :hover, :active, :focus) {
@@ -140,7 +160,11 @@ button {
   }
 
   // Outline (contrast)
-    &.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);
 
     &:is([aria-current], :hover, :active, :focus) {
@@ -148,7 +172,6 @@ button {
     }
   }
 }
-}
 
 @else {
   // Secondary button without .class