Merge pull request #131 from picocss/role-button

Allow role=button to any HTML element

css/pico.classless.css

@@ -909,7 +909,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -918,7 +918,7 @@ button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-a[role=button] {
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -947,18 +947,19 @@ input[type=button]:focus,
 input[type=reset]:hover,
 input[type=reset]:active,
 input[type=reset]:focus,
-a[role=button]:hover,
+[role=button]:hover,
-a[role=button]:active,
+[role=button]:active,
-a[role=button]:focus {
+[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,
 input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
-a[role=button]: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);
 }
@@ -983,7 +984,7 @@ input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
 a[role=button]:not([href]),
-a[role=button][disabled] {
+[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

css/pico.css

@@ -960,7 +960,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -969,7 +969,7 @@ button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-a[role=button] {
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -998,42 +998,28 @@ input[type=button]:focus,
 input[type=reset]:hover,
 input[type=reset]:active,
 input[type=reset]:focus,
-a[role=button]:hover,
+[role=button]:hover,
-a[role=button]:active,
+[role=button]:active,
-a[role=button]:focus {
+[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,
 input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
-a[role=button]: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);
 }
 
-input[type=reset] {
-  --background-color: var(--secondary);
-  --border-color: var(--secondary);
-  --color: var(--secondary-inverse);
-  cursor: pointer;
-}
-input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
-  --background-color: var(--secondary-hover);
-  --border-color: var(--secondary-hover);
-}
-input[type=reset]: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);
-}
-
 button.secondary,
 input[type=submit].secondary,
 input[type=button].secondary,
-input[type=reset].secondary,
+input[type=reset],
-a[role=button].secondary {
+[role=button].secondary {
   --background-color: var(--secondary);
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
@@ -1046,28 +1032,30 @@ input[type=submit].secondary:focus,
 input[type=button].secondary:hover,
 input[type=button].secondary:active,
 input[type=button].secondary:focus,
-input[type=reset].secondary:hover,
+input[type=reset]:hover,
-input[type=reset].secondary:active,
+input[type=reset]:active,
-input[type=reset].secondary:focus,
+input[type=reset]:focus,
-a[role=button].secondary:hover,
+[role=button].secondary:hover,
-a[role=button].secondary:active,
+[role=button].secondary:active,
-a[role=button].secondary:focus {
+[role=button].secondary:focus {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
+  --color: var(--secondary-inverse);
 }
 button.secondary:focus,
 input[type=submit].secondary:focus,
 input[type=button].secondary:focus,
-input[type=reset].secondary:focus,
+input[type=reset]:focus,
-a[role=button].secondary: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);
 }
+
 button.contrast,
 input[type=submit].contrast,
 input[type=button].contrast,
 input[type=reset].contrast,
-a[role=button].contrast {
+[role=button].contrast {
   --background-color: var(--contrast);
   --border-color: var(--contrast);
   --color: var(--contrast-inverse);
@@ -1082,25 +1070,27 @@ input[type=button].contrast:focus,
 input[type=reset].contrast:hover,
 input[type=reset].contrast:active,
 input[type=reset].contrast:focus,
-a[role=button].contrast:hover,
+[role=button].contrast:hover,
-a[role=button].contrast:active,
+[role=button].contrast:active,
-a[role=button].contrast:focus {
+[role=button].contrast:focus {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
+  --color: var(--contrast-inverse);
 }
 button.contrast:focus,
 input[type=submit].contrast:focus,
 input[type=button].contrast:focus,
 input[type=reset].contrast:focus,
-a[role=button].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);
 }
+
 button.outline,
 input[type=submit].outline,
 input[type=button].outline,
 input[type=reset].outline,
-a[role=button].outline {
+[role=button].outline {
   --background-color: transparent;
   --color: var(--primary);
 }
@@ -1114,17 +1104,18 @@ input[type=button].outline:focus,
 input[type=reset].outline:hover,
 input[type=reset].outline:active,
 input[type=reset].outline:focus,
-a[role=button].outline:hover,
+[role=button].outline:hover,
-a[role=button].outline:active,
+[role=button].outline:active,
-a[role=button].outline:focus {
+[role=button].outline:focus {
   --background-color: transparent;
   --color: var(--primary-hover);
 }
+
 button.outline.secondary,
 input[type=submit].outline.secondary,
 input[type=button].outline.secondary,
 input[type=reset].outline.secondary,
-a[role=button].outline.secondary {
+[role=button].outline.secondary {
   --color: var(--secondary);
 }
 button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
@@ -1137,16 +1128,17 @@ input[type=button].outline.secondary:focus,
 input[type=reset].outline.secondary:hover,
 input[type=reset].outline.secondary:active,
 input[type=reset].outline.secondary:focus,
-a[role=button].outline.secondary:hover,
+[role=button].outline.secondary:hover,
-a[role=button].outline.secondary:active,
+[role=button].outline.secondary:active,
-a[role=button].outline.secondary:focus {
+[role=button].outline.secondary:focus {
   --color: var(--secondary-hover);
 }
+
 button.outline.contrast,
 input[type=submit].outline.contrast,
 input[type=button].outline.contrast,
 input[type=reset].outline.contrast,
-a[role=button].outline.contrast {
+[role=button].outline.contrast {
   --color: var(--contrast);
 }
 button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
@@ -1159,9 +1151,9 @@ input[type=button].outline.contrast:focus,
 input[type=reset].outline.contrast:hover,
 input[type=reset].outline.contrast:active,
 input[type=reset].outline.contrast:focus,
-a[role=button].outline.contrast:hover,
+[role=button].outline.contrast:hover,
-a[role=button].outline.contrast:active,
+[role=button].outline.contrast:active,
-a[role=button].outline.contrast:focus {
+[role=button].outline.contrast:focus {
   --color: var(--contrast-hover);
 }
 
@@ -1170,7 +1162,7 @@ input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
 a[role=button]:not([href]),
-a[role=button][disabled] {
+[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

css/pico.fluid.classless.css

@@ -879,7 +879,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -888,7 +888,7 @@ button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-a[role=button] {
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -917,18 +917,19 @@ input[type=button]:focus,
 input[type=reset]:hover,
 input[type=reset]:active,
 input[type=reset]:focus,
-a[role=button]:hover,
+[role=button]:hover,
-a[role=button]:active,
+[role=button]:active,
-a[role=button]:focus {
+[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,
 input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
-a[role=button]: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);
 }
@@ -953,7 +954,7 @@ input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
 a[role=button]:not([href]),
-a[role=button][disabled] {
+[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

css/pico.slim.css

@@ -889,7 +889,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role=button] {
+[role=button] {
   display: inline-block;
   text-decoration: none;
 }
@@ -898,7 +898,7 @@ button,
 input[type=submit],
 input[type=button],
 input[type=reset],
-a[role=button] {
+[role=button] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -926,42 +926,28 @@ input[type=button]:focus,
 input[type=reset]:hover,
 input[type=reset]:active,
 input[type=reset]:focus,
-a[role=button]:hover,
+[role=button]:hover,
-a[role=button]:active,
+[role=button]:active,
-a[role=button]:focus {
+[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,
 input[type=submit]:focus,
 input[type=button]:focus,
 input[type=reset]:focus,
-a[role=button]: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);
 }
 
-input[type=reset] {
-  --background-color: var(--secondary);
-  --border-color: var(--secondary);
-  --color: var(--secondary-inverse);
-  cursor: pointer;
-}
-input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
-  --background-color: var(--secondary-hover);
-  --border-color: var(--secondary-hover);
-}
-input[type=reset]: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);
-}
-
 button.secondary,
 input[type=submit].secondary,
 input[type=button].secondary,
-input[type=reset].secondary,
+input[type=reset],
-a[role=button].secondary {
+[role=button].secondary {
   --background-color: var(--secondary);
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
@@ -974,28 +960,30 @@ input[type=submit].secondary:focus,
 input[type=button].secondary:hover,
 input[type=button].secondary:active,
 input[type=button].secondary:focus,
-input[type=reset].secondary:hover,
+input[type=reset]:hover,
-input[type=reset].secondary:active,
+input[type=reset]:active,
-input[type=reset].secondary:focus,
+input[type=reset]:focus,
-a[role=button].secondary:hover,
+[role=button].secondary:hover,
-a[role=button].secondary:active,
+[role=button].secondary:active,
-a[role=button].secondary:focus {
+[role=button].secondary:focus {
   --background-color: var(--secondary-hover);
   --border-color: var(--secondary-hover);
+  --color: var(--secondary-inverse);
 }
 button.secondary:focus,
 input[type=submit].secondary:focus,
 input[type=button].secondary:focus,
-input[type=reset].secondary:focus,
+input[type=reset]:focus,
-a[role=button].secondary: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);
 }
+
 button.contrast,
 input[type=submit].contrast,
 input[type=button].contrast,
 input[type=reset].contrast,
-a[role=button].contrast {
+[role=button].contrast {
   --background-color: var(--contrast);
   --border-color: var(--contrast);
   --color: var(--contrast-inverse);
@@ -1010,25 +998,27 @@ input[type=button].contrast:focus,
 input[type=reset].contrast:hover,
 input[type=reset].contrast:active,
 input[type=reset].contrast:focus,
-a[role=button].contrast:hover,
+[role=button].contrast:hover,
-a[role=button].contrast:active,
+[role=button].contrast:active,
-a[role=button].contrast:focus {
+[role=button].contrast:focus {
   --background-color: var(--contrast-hover);
   --border-color: var(--contrast-hover);
+  --color: var(--contrast-inverse);
 }
 button.contrast:focus,
 input[type=submit].contrast:focus,
 input[type=button].contrast:focus,
 input[type=reset].contrast:focus,
-a[role=button].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);
 }
+
 button.outline,
 input[type=submit].outline,
 input[type=button].outline,
 input[type=reset].outline,
-a[role=button].outline {
+[role=button].outline {
   --background-color: transparent;
   --color: var(--primary);
 }
@@ -1042,17 +1032,18 @@ input[type=button].outline:focus,
 input[type=reset].outline:hover,
 input[type=reset].outline:active,
 input[type=reset].outline:focus,
-a[role=button].outline:hover,
+[role=button].outline:hover,
-a[role=button].outline:active,
+[role=button].outline:active,
-a[role=button].outline:focus {
+[role=button].outline:focus {
   --background-color: transparent;
   --color: var(--primary-hover);
 }
+
 button.outline.secondary,
 input[type=submit].outline.secondary,
 input[type=button].outline.secondary,
 input[type=reset].outline.secondary,
-a[role=button].outline.secondary {
+[role=button].outline.secondary {
   --color: var(--secondary);
 }
 button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
@@ -1065,16 +1056,17 @@ input[type=button].outline.secondary:focus,
 input[type=reset].outline.secondary:hover,
 input[type=reset].outline.secondary:active,
 input[type=reset].outline.secondary:focus,
-a[role=button].outline.secondary:hover,
+[role=button].outline.secondary:hover,
-a[role=button].outline.secondary:active,
+[role=button].outline.secondary:active,
-a[role=button].outline.secondary:focus {
+[role=button].outline.secondary:focus {
   --color: var(--secondary-hover);
 }
+
 button.outline.contrast,
 input[type=submit].outline.contrast,
 input[type=button].outline.contrast,
 input[type=reset].outline.contrast,
-a[role=button].outline.contrast {
+[role=button].outline.contrast {
   --color: var(--contrast);
 }
 button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus,
@@ -1087,9 +1079,9 @@ input[type=button].outline.contrast:focus,
 input[type=reset].outline.contrast:hover,
 input[type=reset].outline.contrast:active,
 input[type=reset].outline.contrast:focus,
-a[role=button].outline.contrast:hover,
+[role=button].outline.contrast:hover,
-a[role=button].outline.contrast:active,
+[role=button].outline.contrast:active,
-a[role=button].outline.contrast:focus {
+[role=button].outline.contrast:focus {
   --color: var(--contrast-hover);
 }
 
@@ -1098,7 +1090,7 @@ input[type=submit][disabled],
 input[type=button][disabled],
 input[type=reset][disabled],
 a[role=button]:not([href]),
-a[role=button][disabled] {
+[role=button][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }

docs/src/buttons.html

@@ -30,7 +30,7 @@
 
             </footer>
           </article>
-          <p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code>&lt;<b>a</b> <i>role</i>=<u>"button"&gt;</u></code> if you need an inline element.</p>
+          <p>Buttons are <code><i>width</i>: <u>100%</u>;</code> by default. Use <code><i>role</i>=<u>"button"</code> on an inline element if you need an inline button.</p>
           <article aria-label="Inline buttons examples">
             <a href="#" onclick="event.preventDefault()" role="button">Link</a>
             <a href="#" onclick="event.preventDefault()" role="button">Link</a>

scss/content/_button.scss

@@ -43,7 +43,7 @@ button {
   margin-bottom: var(--spacing);
 }
 
-a[role="button"] {
+[role="button"] {
   display: inline-block;
   text-decoration: none;
 }
@@ -52,7 +52,7 @@ button,
 input[type="submit"],
 input[type="button"],
 input[type="reset"],
-a[role="button"] {
+[role="button"] {
   --background-color: var(--primary);
   --border-color: var(--primary);
   --color: var(--primary-inverse);
@@ -83,6 +83,7 @@ a[role="button"] {
     --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);
   }
 
   &:focus {
@@ -91,116 +92,136 @@ a[role="button"] {
   }
 }
 
-// Secondary button without .class
+// .secondary, .contrast & .outline
-input[type="reset"] {
+@if $enable-classes {
-  --background-color: var(--secondary);
-  --border-color: var(--secondary);
-  --color: var(--secondary-inverse);
-  cursor: pointer;
 
-  &:hover,
+  // Secondary
-  &:active,
+  button.secondary,
-  &:focus {
+  input[type="submit"].secondary,
-    --background-color: var(--secondary-hover);
+  input[type="button"].secondary,
-    --border-color: var(--secondary-hover);
+  input[type="reset"],
+  [role="button"].secondary {
+    --background-color: var(--secondary);
+    --border-color: var(--secondary);
+    --color: var(--secondary-inverse);
+    cursor: pointer;
+
+    &: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)),
+  button.contrast,
-      0 0 0 var(--outline-width) var(--secondary-focus);
+  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);
+
+    &: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)
+  button.outline,
+  input[type="submit"].outline,
+  input[type="button"].outline,
+  input[type="reset"].outline,
+  [role="button"].outline {
+    --background-color: transparent;
+    --color: var(--primary);
+
+    &:hover,
+    &:active,
+    &:focus {
+      --background-color: transparent;
+      --color: var(--primary-hover);
+    }
+  }
+
+  // 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);
+
+    &:hover,
+    &:active,
+    &:focus {
+      --color: var(--secondary-hover);
+    }
+  }
+
+  // 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);
+
+    &:hover,
+    &:active,
+    &:focus {
+      --color: var(--contrast-hover);
+    }
   }
 }
 
-// .secondary, .contrast & .outline
+@else {
-@if $enable-classes {
+  // Secondary button without .class
-  button,
+  input[type="reset"] {
-  input[type="submit"],
+    --background-color: var(--secondary);
-  input[type="button"],
+    --border-color: var(--secondary);
-  input[type="reset"],
+    --color: var(--secondary-inverse);
-  a[role="button"] {
+    cursor: pointer;
-    // Secondary
-    &.secondary {
-      --background-color: var(--secondary);
-      --border-color: var(--secondary);
-      --color: var(--secondary-inverse);
-      cursor: pointer;
 
-      &:hover,
+    &:hover,
-      &:active,
+    &:active,
-      &:focus {
+    &:focus {
-        --background-color: var(--secondary-hover);
+      --background-color: var(--secondary-hover);
-        --border-color: var(--secondary-hover);
+      --border-color: var(--secondary-hover);
-      }
-
-      &: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);
-      --color: var(--contrast-inverse);
-
-      &:hover,
-      &:active,
-      &:focus {
-        --background-color: var(--contrast-hover);
-        --border-color: var(--contrast-hover);
-      }
-
-      &: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)
-    &.outline {
-      --background-color: transparent;
-      --color: var(--primary);
-
-      &:hover,
-      &:active,
-      &:focus {
-        --background-color: transparent;
-        --color: var(--primary-hover);
-      }
-    }
-
-    // Outline (secondary)
-    &.outline.secondary {
-      --color: var(--secondary);
-
-      &:hover,
-      &:active,
-      &:focus {
-        --color: var(--secondary-hover);
-      }
-    }
-
-    // Outline (contrast)
-    &.outline.contrast {
-      --color: var(--contrast);
-
-      &:hover,
-      &:active,
-      &:focus {
-        --color: var(--contrast-hover);
-      }
     }
   }
 }
 
 // Button [disabled]
+// 1. Links without href are disabled by default
 button[disabled],
 input[type="submit"][disabled],
 input[type="button"][disabled],
 input[type="reset"][disabled],
-a[role="button"]:not([href]),
+a[role="button"]:not([href]), // 1
-a[role="button"][disabled] {
+[role="button"][disabled] {
   opacity: 0.5;
   pointer-events: none;
 }