Utility API improvement: use $key/$value instead of nth (#28828)

Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>

scss/_functions.scss

@@ -53,7 +53,6 @@
   @return $map;
 }
 
-
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //

scss/mixins/_utilities.scss

@@ -8,7 +8,7 @@
     $values: zip($values, $values);
   }
 
-  @each $value in $values {
+  @each $key, $value in $values {
     $properties: map-get($utility, property);
 
     // Multiple properties are possible, for example with vertical or horizontal margins or paddings
@@ -21,12 +21,12 @@
     $property-class: if($property-class, $property-class, nth($properties, 1));
 
     // Don't prefix if value key is null (eg. with shadow class)
-    $property-class-modifier: if(nth($value, 1), "-" + nth($value, 1), "");
+    $property-class-modifier: if($key, "-" + $key, "");
 
     .#{$property-class + $infix + $property-class-modifier} {
       @each $property in $properties {
         // stylelint-disable-next-line declaration-no-important
-        #{$property}: #{nth($value, 2)} !important;
+        #{$property}: $value !important;
       }
     }
   }