Putting logic at the top of the mixin instead of in between the css properties

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 69f5d4a42e296b084b819c2061321499896d0bf5..032e71c6d7f9f517e94486a77b934be9bd41b87e 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -164,17 +164,15 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   $background: $primary-color,
   $color: $button-color
 ) {
+  @if $color == auto {
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+  }
+
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
 
   &, &:hover, &:focus {
     background-color: $background;
-    
-    // If color is set to `auto`, the function `color-pick-contrast` automatically generates a color based on the background color 
-    @if $color == auto {
-      $color: color-pick-contrast($background, ($button-color, $button-color-alt));
-    }
-
     color: $color;
   }
 }