diff --git a/src/scss/mixins.scss b/src/scss/mixins.scss
index 5afafdd8d1c6882b765abb0ebd14a51b415c43dc..e1773d13e429920834e383f7be5b44ff15677e5a 100644
--- a/src/scss/mixins.scss
+++ b/src/scss/mixins.scss
@@ -43,48 +43,60 @@
 *
 * @param $size is deprecated and should not be used anymore
 */
-@mixin gl-focus(
-  $size: null,
+@mixin gl-focus($size: null,
   $color: false,
   $important: false,
   $inset: false,
   $focus-ring: $focus-ring,
   $outline: false,
-  $outline-offset: $outline-offset
-) {
-  @if $inset == true {
+  $outline-offset: $outline-offset) {
+  @if $inset ==true {
     @if $color {
       box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
-        inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
-        inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
-        $focus-ring-inset if-important($important);
+      inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
+      inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
+      $focus-ring-inset if-important($important);
       outline: none if-important($important);
+
       @media (forced-colors: active) {
         outline: 2px solid LinkText if-important($important);
       }
-    } @else if $outline == true {
+    }
+
+    @else if $outline ==true {
       outline: $focus-ring-outline if-important($important);
       outline-offset: $outline-offset;
-    } @else {
+    }
+
+    @else {
       box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
         $focus-ring-inset if-important($important);
       outline: none if-important($important);
+
       @media (forced-colors: active) {
         outline: 2px solid LinkText if-important($important);
       }
     }
-  } @else if $color {
+  }
+
+  @else if $color {
     box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
     outline: none if-important($important);
+
     @media (forced-colors: active) {
       outline: 2px solid LinkText if-important($important);
     }
-  } @else if $outline == true {
+  }
+
+  @else if $outline ==true {
     outline: $focus-ring-outline if-important($important);
     outline-offset: $outline-offset;
-  } @else {
+  }
+
+  @else {
     box-shadow: $focus-ring if-important($important);
     outline: none if-important($important);
+
     @media (forced-colors: active) {
       outline: 2px solid LinkText if-important($important);
     }
@@ -103,14 +115,18 @@
 */
 @mixin gl-media-breakpoint-up($name) {
   $min: map-get($breakpoints, $name);
-  @if $min == null {
+
+  @if $min ==null {
     @error "#{$name} is not a valid breakpoint for this @media query.";
   }
-  @if $min != 0 {
+
+  @if $min !=0 {
     @media (min-width: $min) {
       @content;
     }
-  } @else {
+  }
+
+  @else {
     @content;
   }
 }
@@ -128,9 +144,11 @@
 */
 @mixin gl-media-breakpoint-down($name) {
   $max: map-get($breakpoints, $name);
-  @if ($max == null or $max == 0) {
+
+  @if ($max ==null or $max ==0) {
     @error "#{$name} is not a valid breakpoint for this @media query.";
   }
+
   // The maximum value is reduced by 0.02px to work around the limitations of
   // `min-` and `max-` prefixes and with fractional viewport sizes.
   // See: https://www.w3.org/TR/mediaqueries-4/#mq-min-max
@@ -151,17 +169,23 @@
 * @param $fixed Boolean toggle default and fixed font size scales
 */
 @function get-font-size-variable($size, $fixed) {
-  @if $fixed == true {
+  @if $fixed ==true {
     @if map-has-key($gl-font-sizes-fixed, $size) {
       @return map-get($gl-font-sizes-fixed, $size);
-    } @else {
+    }
+
+    @else {
       @error "#{$size} is not a valid fixed font size property";
       @return null;
     }
-  } @else {
+  }
+
+  @else {
     @if map-has-key($gl-font-sizes, $size) {
       @return map-get($gl-font-sizes, $size);
-    } @else {
+    }
+
+    @else {
       @error "#{$size} is not a valid font size property";
       @return null;
     }
@@ -229,4 +253,4 @@
     background-color: var(--gl-action-selected-background-color-active);
     border-color: var(--gl-action-selected-border-color-active);
   }
-}
+}
\ No newline at end of file
diff --git a/src/scss/mixins.spec.scss b/src/scss/mixins.spec.scss
index 4017340a2e93332d40852d17b2cad02fbbe999a4..06d81dcf445cea8ad8eb17edf0531a885e88d8b6 100644
--- a/src/scss/mixins.spec.scss
+++ b/src/scss/mixins.spec.scss
@@ -8,6 +8,7 @@
       @include output {
         @include gl-fluid-font-size(2rem, 3.5rem);
       }
+
       @include expect {
         // prettier-ignore
         font-size: clamp(2rem, -0.6666666667rem + 5.5555555556vw, 3.5rem);
@@ -22,6 +23,7 @@
       @include output {
         @include gl-fluid-line-height(2rem, 3.5rem);
       }
+
       @include expect {
         // prettier-ignore
         line-height: clamp(2rem, -0.6666666667rem + 5.5555555556vw, 3.5rem);
@@ -38,11 +40,13 @@
           color: $green-100;
         }
       }
+
       @include expect {
         color: $green-100;
       }
     }
   }
+
   @include it('returns min-width media query for sm') {
     @include assert {
       @include output {
@@ -50,6 +54,7 @@
           color: $blue-100;
         }
       }
+
       @include expect {
         @media (min-width: '576px') {
           color: $blue-100;
@@ -63,11 +68,13 @@
   @include it('returns max-width media query for lg') {
     @include assert {
       @include output {
+
         // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
         @include gl-media-breakpoint-down(lg) {
           color: $red-100;
         }
       }
+
       @include expect {
         @media (max-width: '991.98px') {
           color: $red-100;
@@ -75,14 +82,17 @@
       }
     }
   }
+
   @include it('returns max-width media query for md') {
     @include assert {
       @include output {
+
         // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
         @include gl-media-breakpoint-down(md) {
           color: $orange-100;
         }
       }
+
       @include expect {
         @media (max-width: '767.98px') {
           color: $orange-100;
@@ -90,4 +100,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file