fix(chips): update chip padding to contain text padding (#17188)

* fix(chips): update chip padding to contain text padding

* fix(chip): indigo padding

* fix(chips): apply fixes on paddings

* fix(chips): fix start/end gaps

Author: didimmova

projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss

@@ -115,7 +115,6 @@
             )
         );
 
-        gap: sizable(rem(3px), rem(6px), rem(8px));
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background');
         border: $border-size solid var-get($theme, 'border-color');
@@ -410,6 +409,8 @@
     }
 
     %igx-chip__start {
+        gap: sizable(rem(3px), rem(6px), rem(8px));
+
         > igx-avatar,
         > igx-circular-bar {
             &:first-child {
@@ -437,6 +438,8 @@
     }
 
     %igx-chip__end {
+        gap: sizable(rem(3px), rem(6px), rem(8px));
+
         > igx-avatar,
         > igx-circular-bar {
             &:last-child {
@@ -490,6 +493,7 @@
     %igx-chip__content {
         @include ellipsis();
 
+        padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
         max-width: $chip-max-width;
 
         &:empty {