Allow opt-out of active state in button mixin

src/styles/mixins/buttons.scss

@@ -31,6 +31,14 @@
   border-style: none;
 }
 
+@mixin button-hover {
+  &:hover:not([disabled]),
+  &:focus:not([disabled]) {
+    transition: 0.2s ease-out;
+    color: var.$grey-7;
+  }
+}
+
 /**
  * Basic color, sizing, padding and hover for buttons.
  */
@@ -45,21 +53,18 @@
   svg {
     @include utils.icon--medium;
   }
-
-  &:hover:not([disabled]) {
-    transition: 0.2s ease-out;
-    color: var.$grey-7;
-  }
+  @include button-hover;
 }
 
 /* A button with an icon and no displayed text */
-@mixin button--icon-only {
+@mixin button--icon-only($with-active-state: true) {
   @include button;
   color: var.$grey-mid;
   @media (pointer: coarse) {
     min-width: var.$touch-target-size;
     min-height: var.$touch-target-size;
   }
+  @if $with-active-state == true {
     &[aria-expanded='true'],
     &[aria-pressed='true'] {
       color: var.$color-brand;
@@ -68,6 +73,7 @@
         color: var.$color-brand;
       }
     }
+  }
 }
 
 /* A button with displayed text. It may or may not have an icon. */