Mixin comments for button disabled. Using background and color simultaneously

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index cdb4295ba50dbdd86443ed7cf5cc143c0fb6560a..23f475875c648888e9d23e506a466d070d783368 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -158,22 +158,22 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 }
 
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
+/// @param [Color] $background [$primary-color] - Background color of the disabled button. Set to `auto` to have the mixin automatically generate a hover color.
+/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a hover color.
 @mixin button-disabled(
   $background: $primary-color,
   $color: $button-color
 ) {
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
-  background-color: $background;
-  
-  @if $color == auto {
-    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
-  }
 
-  color: $color;
-
-  &:hover, &:focus {
+  &, &:hover, &:focus {
     background-color: $background;
+  
+    @if $color == auto {
+      $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+    }
+
     color: $color;
   }
 }