refactor(list): update item gaps (#1480)

Author: SisIvanova

src/components/list/themes/item.base.scss

@@ -4,6 +4,7 @@
     display: flex;
     align-items: center;
     position: relative;
+    gap: rem(16px);
     transition: background .15s ease-out;
     padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
     padding-block: pad-block(rem(2px), rem(4px), rem(8px));
@@ -28,6 +29,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: rem(8px);
 }
 
 [part='title'] {

src/components/list/themes/shared/container/list.indigo.scss

@@ -5,4 +5,6 @@ $theme: $indigo;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
+
+    gap: rem(4px);
 }

src/components/list/themes/shared/item/list-item.common.scss

@@ -53,11 +53,3 @@ $theme: $material;
 [part='end'] {
     color: var-get($theme, 'item-action-color');
 }
-
-[name='start']::slotted(*) {
-    margin-inline-end: pad(rem(16px));
-}
-
-[name='end']::slotted(*) {
-    margin-inline-start: pad(rem(16px));
-}

src/components/list/themes/shared/item/list-item.indigo.scss

@@ -15,21 +15,12 @@
     @include type-style('body-2');
 }
 
-[part='start'],
-[part='end'] {
-    gap: rem(8px);
-}
-
-[name='start']::slotted(*) {
-    margin-inline-end: 0;
-}
-
-[name='end']::slotted(*) {
-    margin-inline-start: 0;
-}
-
 [part='header'] {
     display: flex;
     flex-direction: column;
     gap: rem(2px);
 }
+
+[part='end'] {
+    gap: sizable(rem(4px), rem(6px), rem(8px));
+}