chore(button): Optimize selectors

css/pico.classless.css

@@ -869,14 +869,6 @@ button,
   -webkit-appearance: button;
 }
 
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
 button {
   display: block;
   width: 100%;
@@ -888,11 +880,7 @@ button {
   text-decoration: none;
 }
 
-button,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
-input[type=submit],
-input[type=button],
-input[type=reset],
-[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -911,33 +899,13 @@ input[type=reset],
   cursor: pointer;
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
 }
-button[aria-current], button:hover, button:active, button:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
-input[type=submit][aria-current],
-input[type=submit]:hover,
-input[type=submit]:active,
-input[type=submit]:focus,
-input[type=button][aria-current],
-input[type=button]:hover,
-input[type=button]:active,
-input[type=button]:focus,
-input[type=reset][aria-current],
-input[type=reset]:hover,
-input[type=reset]:active,
-input[type=reset]:focus,
-[role=button][aria-current],
-[role=button]:hover,
-[role=button]:active,
-[role=button]: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);
 }
-button:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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);
 }
@@ -948,7 +916,7 @@ input[type=reset] {
   --color: var(--secondary-inverse);
   cursor: pointer;
 }
-input[type=reset][aria-current], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
+input[type=reset]:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
 }
@@ -957,12 +925,8 @@ input[type=reset]:focus {
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
-button[disabled],
+:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
-input[type=submit][disabled],
+a[role=button]:not([href]) {
-input[type=button][disabled],
-input[type=reset][disabled],
-a[role=button]:not([href]),
-[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

css/pico.css

@@ -926,14 +926,6 @@ button,
   -webkit-appearance: button;
 }
 
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
 button {
   display: block;
   width: 100%;
@@ -945,11 +937,7 @@ button {
   text-decoration: none;
 }
 
-button,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
-input[type=submit],
-input[type=button],
-input[type=reset],
-[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -968,205 +956,69 @@ input[type=reset],
   cursor: pointer;
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
 }
-button[aria-current], button:hover, button:active, button:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
-input[type=submit][aria-current],
-input[type=submit]:hover,
-input[type=submit]:active,
-input[type=submit]:focus,
-input[type=button][aria-current],
-input[type=button]:hover,
-input[type=button]:active,
-input[type=button]:focus,
-input[type=reset][aria-current],
-input[type=reset]:hover,
-input[type=reset]:active,
-input[type=reset]:focus,
-[role=button][aria-current],
-[role=button]:hover,
-[role=button]:active,
-[role=button]: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);
 }
-button:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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);
 }
 
-button.secondary,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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;
 }
-button.secondary[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:is([aria-current], :hover, :active, :focus) {
-input[type=submit].secondary[aria-current],
-input[type=submit].secondary:hover,
-input[type=submit].secondary:active,
-input[type=submit].secondary:focus,
-input[type=button].secondary[aria-current],
-input[type=button].secondary:hover,
-input[type=button].secondary:active,
-input[type=button].secondary:focus,
-input[type=reset][aria-current],
-input[type=reset]:hover,
-input[type=reset]:active,
-input[type=reset]:focus,
-[role=button].secondary[aria-current],
-[role=button].secondary:hover,
-[role=button].secondary:active,
-[role=button].secondary:focus {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
   --color: var(--secondary-inverse);
 }
-button.secondary:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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);
 }
-button.contrast[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
-input[type=submit].contrast[aria-current],
-input[type=submit].contrast:hover,
-input[type=submit].contrast:active,
-input[type=submit].contrast:focus,
-input[type=button].contrast[aria-current],
-input[type=button].contrast:hover,
-input[type=button].contrast:active,
-input[type=button].contrast:focus,
-input[type=reset].contrast[aria-current],
-input[type=reset].contrast:hover,
-input[type=reset].contrast:active,
-input[type=reset].contrast:focus,
-[role=button].contrast[aria-current],
-[role=button].contrast:hover,
-[role=button].contrast:active,
-[role=button].contrast:focus {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
   --color: var(--contrast-inverse);
 }
-button.contrast:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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);
 }
-button.outline[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline[aria-current],
-input[type=submit].outline:hover,
-input[type=submit].outline:active,
-input[type=submit].outline:focus,
-input[type=button].outline[aria-current],
-input[type=button].outline:hover,
-input[type=button].outline:active,
-input[type=button].outline:focus,
-input[type=reset].outline[aria-current],
-input[type=reset].outline:hover,
-input[type=reset].outline:active,
-input[type=reset].outline:focus,
-[role=button].outline[aria-current],
-[role=button].outline:hover,
-[role=button].outline:active,
-[role=button].outline: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);
 }
-button.outline.secondary[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline.secondary[aria-current],
-input[type=submit].outline.secondary:hover,
-input[type=submit].outline.secondary:active,
-input[type=submit].outline.secondary:focus,
-input[type=button].outline.secondary[aria-current],
-input[type=button].outline.secondary:hover,
-input[type=button].outline.secondary:active,
-input[type=button].outline.secondary:focus,
-input[type=reset].outline.secondary[aria-current],
-input[type=reset].outline.secondary:hover,
-input[type=reset].outline.secondary:active,
-input[type=reset].outline.secondary:focus,
-[role=button].outline.secondary[aria-current],
-[role=button].outline.secondary:hover,
-[role=button].outline.secondary:active,
-[role=button].outline.secondary: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);
 }
-button.outline.contrast[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline.contrast[aria-current],
-input[type=submit].outline.contrast:hover,
-input[type=submit].outline.contrast:active,
-input[type=submit].outline.contrast:focus,
-input[type=button].outline.contrast[aria-current],
-input[type=button].outline.contrast:hover,
-input[type=button].outline.contrast:active,
-input[type=button].outline.contrast:focus,
-input[type=reset].outline.contrast[aria-current],
-input[type=reset].outline.contrast:hover,
-input[type=reset].outline.contrast:active,
-input[type=reset].outline.contrast:focus,
-[role=button].outline.contrast[aria-current],
-[role=button].outline.contrast:hover,
-[role=button].outline.contrast:active,
-[role=button].outline.contrast:focus {
   --color: var(--contrast-hover);
 }
 
-button[disabled],
+:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
-input[type=submit][disabled],
+a[role=button]:not([href]) {
-input[type=button][disabled],
-input[type=reset][disabled],
-a[role=button]:not([href]),
-[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

css/pico.fluid.classless.css

@@ -839,14 +839,6 @@ button,
   -webkit-appearance: button;
 }
 
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
 button {
   display: block;
   width: 100%;
@@ -858,11 +850,7 @@ button {
   text-decoration: none;
 }
 
-button,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
-input[type=submit],
-input[type=button],
-input[type=reset],
-[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -881,33 +869,13 @@ input[type=reset],
   cursor: pointer;
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
 }
-button[aria-current], button:hover, button:active, button:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
-input[type=submit][aria-current],
-input[type=submit]:hover,
-input[type=submit]:active,
-input[type=submit]:focus,
-input[type=button][aria-current],
-input[type=button]:hover,
-input[type=button]:active,
-input[type=button]:focus,
-input[type=reset][aria-current],
-input[type=reset]:hover,
-input[type=reset]:active,
-input[type=reset]:focus,
-[role=button][aria-current],
-[role=button]:hover,
-[role=button]:active,
-[role=button]: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);
 }
-button:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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);
 }
@@ -918,7 +886,7 @@ input[type=reset] {
   --color: var(--secondary-inverse);
   cursor: pointer;
 }
-input[type=reset][aria-current], input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
+input[type=reset]:is([aria-current], :hover, :active, :focus) {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
 }
@@ -927,12 +895,8 @@ input[type=reset]:focus {
     0 0 0 var(--outline-width) var(--secondary-focus);
 }
 
-button[disabled],
+:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
-input[type=submit][disabled],
+a[role=button]:not([href]) {
-input[type=button][disabled],
-input[type=reset][disabled],
-a[role=button]:not([href]),
-[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

css/pico.slim.css

@@ -855,14 +855,6 @@ button,
   -webkit-appearance: button;
 }
 
-button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
 button {
   display: block;
   width: 100%;
@@ -874,11 +866,7 @@ button {
   text-decoration: none;
 }
 
-button,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
-input[type=submit],
-input[type=button],
-input[type=reset],
-[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -896,205 +884,69 @@ input[type=reset],
   text-align: center;
   cursor: pointer;
 }
-button[aria-current], button:hover, button:active, button:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]):is([aria-current], :hover, :active, :focus) {
-input[type=submit][aria-current],
-input[type=submit]:hover,
-input[type=submit]:active,
-input[type=submit]:focus,
-input[type=button][aria-current],
-input[type=button]:hover,
-input[type=button]:active,
-input[type=button]:focus,
-input[type=reset][aria-current],
-input[type=reset]:hover,
-input[type=reset]:active,
-input[type=reset]:focus,
-[role=button][aria-current],
-[role=button]:hover,
-[role=button]:active,
-[role=button]: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);
 }
-button:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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);
 }
 
-button.secondary,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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;
 }
-button.secondary[aria-current], button.secondary:hover, button.secondary:active, button.secondary:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).secondary:is([aria-current], :hover, :active, :focus) {
-input[type=submit].secondary[aria-current],
-input[type=submit].secondary:hover,
-input[type=submit].secondary:active,
-input[type=submit].secondary:focus,
-input[type=button].secondary[aria-current],
-input[type=button].secondary:hover,
-input[type=button].secondary:active,
-input[type=button].secondary:focus,
-input[type=reset][aria-current],
-input[type=reset]:hover,
-input[type=reset]:active,
-input[type=reset]:focus,
-[role=button].secondary[aria-current],
-[role=button].secondary:hover,
-[role=button].secondary:active,
-[role=button].secondary:focus {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
   --color: var(--secondary-inverse);
 }
-button.secondary:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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);
 }
-button.contrast[aria-current], button.contrast:hover, button.contrast:active, button.contrast:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
-input[type=submit].contrast[aria-current],
-input[type=submit].contrast:hover,
-input[type=submit].contrast:active,
-input[type=submit].contrast:focus,
-input[type=button].contrast[aria-current],
-input[type=button].contrast:hover,
-input[type=button].contrast:active,
-input[type=button].contrast:focus,
-input[type=reset].contrast[aria-current],
-input[type=reset].contrast:hover,
-input[type=reset].contrast:active,
-input[type=reset].contrast:focus,
-[role=button].contrast[aria-current],
-[role=button].contrast:hover,
-[role=button].contrast:active,
-[role=button].contrast:focus {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
   --color: var(--contrast-inverse);
 }
-button.contrast:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="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);
 }
-button.outline[aria-current], button.outline:hover, button.outline:active, button.outline:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline[aria-current],
-input[type=submit].outline:hover,
-input[type=submit].outline:active,
-input[type=submit].outline:focus,
-input[type=button].outline[aria-current],
-input[type=button].outline:hover,
-input[type=button].outline:active,
-input[type=button].outline:focus,
-input[type=reset].outline[aria-current],
-input[type=reset].outline:hover,
-input[type=reset].outline:active,
-input[type=reset].outline:focus,
-[role=button].outline[aria-current],
-[role=button].outline:hover,
-[role=button].outline:active,
-[role=button].outline: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);
 }
-button.outline.secondary[aria-current], button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.secondary:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline.secondary[aria-current],
-input[type=submit].outline.secondary:hover,
-input[type=submit].outline.secondary:active,
-input[type=submit].outline.secondary:focus,
-input[type=button].outline.secondary[aria-current],
-input[type=button].outline.secondary:hover,
-input[type=button].outline.secondary:active,
-input[type=button].outline.secondary:focus,
-input[type=reset].outline.secondary[aria-current],
-input[type=reset].outline.secondary:hover,
-input[type=reset].outline.secondary:active,
-input[type=reset].outline.secondary:focus,
-[role=button].outline.secondary[aria-current],
-[role=button].outline.secondary:hover,
-[role=button].outline.secondary:active,
-[role=button].outline.secondary: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);
 }
-button.outline.contrast[aria-current], button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).outline.contrast:is([aria-current], :hover, :active, :focus) {
-input[type=submit].outline.contrast[aria-current],
-input[type=submit].outline.contrast:hover,
-input[type=submit].outline.contrast:active,
-input[type=submit].outline.contrast:focus,
-input[type=button].outline.contrast[aria-current],
-input[type=button].outline.contrast:hover,
-input[type=button].outline.contrast:active,
-input[type=button].outline.contrast:focus,
-input[type=reset].outline.contrast[aria-current],
-input[type=reset].outline.contrast:hover,
-input[type=reset].outline.contrast:active,
-input[type=reset].outline.contrast:focus,
-[role=button].outline.contrast[aria-current],
-[role=button].outline.contrast:hover,
-[role=button].outline.contrast:active,
-[role=button].outline.contrast:focus {
   --color: var(--contrast-hover);
 }
 
-button[disabled],
+:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
-input[type=submit][disabled],
+a[role=button]:not([href]) {
-input[type=button][disabled],
-input[type=reset][disabled],
-a[role=button]:not([href]),
-[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

scss/content/_button.scss

@@ -25,15 +25,6 @@ button,
   -webkit-appearance: button;
 }
 
-// Remove the inner border and padding in Firefox
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
 // Pico
 // ––––––––––––––––––––
 
@@ -48,11 +39,7 @@ button {
   text-decoration: none;
 }
 
-button,
+:where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
-input[type="submit"],
-input[type="button"],
-input[type="reset"],
-[role="button"] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -73,14 +60,11 @@ input[type="reset"],
 
   @if $enable-transitions {
     transition: background-color var(--transition),
-      border-color var(--transition), color var(--transition),
+    border-color var(--transition), color var(--transition),
-      box-shadow var(--transition);
+    box-shadow var(--transition);
   }
 
-  &[aria-current],
+  &:is([aria-current], :hover, :active, :focus) {
-  &: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));
@@ -96,104 +80,72 @@ input[type="reset"],
 // .secondary, .contrast & .outline
 @if $enable-classes {
 
-  // Secondary
+  :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
-  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;
     
-    &[aria-current],
+    // Secondary
-    &:hover,
+    &.secondary {
-    &:active,
+      --background-color: var(--secondary);
-    &:focus {
+      --border-color: var(--secondary);
-      --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);
+      }
     }
 
-    &:focus {
+    // Contrast
-      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    &.contrast {
-        0 0 0 var(--outline-width) var(--secondary-focus);
+      --background-color: var(--contrast);
-    }
+      --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);
-
-    &[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);
+      }
     }
 
-    &:focus {
+    // Outline (primary)
-      --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+    &.outline {
-        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);
-
-    &[aria-current],
-    &:hover,
-    &:active,
-    &:focus {
       --background-color: transparent;
-      --color: var(--primary-hover);
+      --color: var(--primary);
+
+      &:is([aria-current], :hover, :active, :focus) {
+        --background-color: transparent;
+        --color: var(--primary-hover);
+      }
     }
-  }
 
-  // Outline (secondary)
+    // Outline (secondary)
-  button.outline.secondary,
+    &.outline.secondary {
-  input[type="submit"].outline.secondary,
+      --color: var(--secondary);
-  input[type="button"].outline.secondary,
-  input[type="reset"].outline.secondary,
-  [role="button"].outline.secondary {
-    --color: var(--secondary);
 
-    &[aria-current],
+      &:is([aria-current], :hover, :active, :focus) {
-    &:hover,
+        --color: var(--secondary-hover);
-    &:active,
+      }
-    &:focus {
-      --color: var(--secondary-hover);
     }
-  }
 
-  // Outline (contrast)
+    // Outline (contrast)
-  button.outline.contrast,
+    &.outline.contrast {
-  input[type="submit"].outline.contrast,
+      --color: var(--contrast);
-  input[type="button"].outline.contrast,
-  input[type="reset"].outline.contrast,
-  [role="button"].outline.contrast {
-    --color: var(--contrast);
 
-    &[aria-current],
+      &:is([aria-current], :hover, :active, :focus) {
-    &:hover,
+        --color: var(--contrast-hover);
-    &:active,
+      }
-    &:focus {
-      --color: var(--contrast-hover);
     }
   }
 }
@@ -206,10 +158,7 @@ input[type="reset"],
     --color: var(--secondary-inverse);
     cursor: pointer;
 
-    &[aria-current],
+    &:is([aria-current], :hover, :active, :focus) {
-    &:hover,
-    &:active,
-    &:focus {
       --background-color: var(--secondary-hover);
       --border-color: var(--secondary-hover);
     }
@@ -222,13 +171,9 @@ input[type="reset"],
 }
 
 // Button [disabled]
-// 1. Links without href are disabled by default
+// Links without href are disabled by default
-button[disabled],
+:where(button, input[type="submit"], input[type="reset"], [role="button"])[disabled],
-input[type="submit"][disabled],
+a[role="button"]:not([href]) {
-input[type="button"][disabled],
-input[type="reset"][disabled],
-a[role="button"]:not([href]), // 1
-[role="button"][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }