refactor(chip): use spacing for margin and padding

Author: SisIvanova

Diff for: projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -270,9 +270,9 @@
     ), $variant);
 
     $chip-padding: (
-        comfortable: 0 rem(8px),
-        cosy: 0 rem(4px),
-        compact: 0 rem(2px)
+        comfortable: 0 spacing(8px, 'comfortable'),
+        cosy: 0 spacing(4px, 'cosy'),
+        compact: 0 spacing(2px, 'compact')
     );
 
     $box-shadow: map.get((
@@ -282,12 +282,12 @@
         indigo-design: null
     ), $variant);
 
-    $item-padding: 4px;
-    $chip-item-padding: 0 rem($item-padding);
+    $item-padding: spacing(4px);
+    $chip-item-padding: 0 $item-padding;
 
     $chip-avatar-inset: map.get((
         material: 0,
-        fluent: -$item-padding,
+        fluent: calc($item-padding * -1),
         bootstrap: 0,
         indigo-design: 0
     ), $variant);
@@ -415,14 +415,14 @@
         + igx-suffix,
         + [igxSuffix],
         + %igx-chip__remove {
-            margin-inline-start: rem(4px);
+            margin-inline-start: spacing(4px);
         }
     }
 
     %igx-chip__prefix {
         + igx-prefix,
         + [igxPrefix] {
-            margin-inline-start: rem(4px);
+            margin-inline-start: spacing(4px);
 
             igx-avatar {
                 max-height: 100%;
@@ -452,7 +452,7 @@
 
     %igx-chip__remove {
         display: inline-flex;
-        margin-inline-end: rem(4px);
+        margin-inline-end: spacing(4px);
         color: var-get($theme, 'remove-icon-color', currentColor);
 
         &:empty {
@@ -491,7 +491,7 @@
 
         + igx-prefix,
         + [igxPrefix] {
-            margin-inline-start: rem(4px);
+            margin-inline-start: spacing(4px);
         }
     }