refactor(styles): use pad function

src/components/accordion/themes/accordion.base.scss

@@ -8,7 +8,7 @@
     }
 
     ::slotted(igc-expansion-panel[open]) {
-        margin: rem(8px) 0;
+        margin: pad-block(rem(8px)) 0;
     }
 
     ::slotted(igc-expansion-panel:first-of-type) {

src/components/banner/themes/banner.base.scss

@@ -9,7 +9,8 @@
 [part~='spacer'] {
     display: flex;
     flex-wrap: wrap;
-    padding: rem(16px) rem(8px);
+    padding-block: pad-block(16px);
+    padding-inline: pad-inline(8px);
     gap: rem(8px);
     justify-content: flex-end;
 }
@@ -45,7 +46,7 @@
 }
 
 ::slotted([slot='prefix']) {
-    margin-inline-end: rem(16px);
+    margin-inline-end: pad-inline(rem(16px));
 }
 
 // OPEN CLOSE BEHAVIOR

src/components/banner/themes/shared/banner.bootstrap.scss

@@ -10,7 +10,7 @@ $theme: $bootstrap;
 }
 
 [part~='message'] {
-    padding: 0 rem(8px);
+    padding: 0 pad-inline(rem(8px));
 }
 
 ::slotted([slot='prefix']) {

src/components/banner/themes/shared/banner.fluent.scss

@@ -10,7 +10,7 @@ $theme: $fluent;
 }
 
 [part~='message'] {
-    padding: 0 rem(8px);
+    padding: 0 pad-inline(rem(8px));
 }
 
 ::slotted([slot='prefix']) {

src/components/banner/themes/shared/banner.indigo.scss

@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 [part~='spacer'] {
-    padding: rem(16px);
+    padding: pad(rem(16px));
     background: var-get($theme, 'banner-background');
     box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
     border-radius: var-get($theme, 'border-radius');

src/components/banner/themes/shared/banner.material.scss

@@ -10,7 +10,7 @@ $theme: $material;
 }
 
 [part~='message'] {
-    padding: 0 rem(8px);
+    padding: 0 pad-inline(rem(8px));
 }
 
 ::slotted([slot='prefix']) {

src/components/button/themes/button/button.base.scss

@@ -36,7 +36,7 @@
     white-space: nowrap;
     text-decoration: none;
     z-index: 0;
-    padding: 0 pad(8px, 12px, 16px);
+    padding: 0 pad-inline(8px, 12px, 16px);
     gap: var(--gap);
     min-width: rem(88px);
 }

src/components/button/themes/button/shared/button.common.scss

@@ -30,7 +30,7 @@ $outlined-theme: $material-outlined;
     border-radius: var-get($fab-theme, 'border-radius');
     min-height: var-get($fab-theme, 'size');
     min-width: var-get($fab-theme, 'size');
-    padding: 0 pad(6px, 10px, 14px);
+    padding: 0 pad-inline(6px, 10px, 14px);
 }
 /* stylelint-enable */
 

src/components/button/themes/button/shared/button.fluent.scss

@@ -31,7 +31,7 @@ $outlined-btn-indent: rem(2px);
 }
 
 [part~='base'] {
-    padding: 0 pad(8px, 12px, 16px);
+    padding: 0 pad-inline(8px, 12px, 16px);
     transition: all .1s ease-in-out;
 }
 

src/components/button/themes/button/shared/button.indigo.scss

@@ -8,8 +8,8 @@ $outlined-theme: $indigo-outlined;
 
 :host [part~='base']{
     min-width: rem(28px);
-    padding: 0 pad(10px, 16px, 24px);
-    
+    padding: 0 pad-inline(10px, 16px, 24px);
+
     ::slotted(igc-icon) {
         --component-size: var(--ig-size-medium) !important;
     }
@@ -34,7 +34,7 @@ $outlined-theme: $indigo-outlined;
     --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
 
     [part~='base'] {
-        padding: 0 pad(rem(6px), rem(8px), rem(10px));
+        padding: 0 pad-inline(rem(6px), rem(8px), rem(10px));
     }
 }
 

src/components/calendar/themes/calendar.base.scss

@@ -55,7 +55,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0rem(16px);
+    padding: 0 pad-inline(rem(16px));
     user-select: none;
 }
 
@@ -136,7 +136,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: rem(16px);
+    padding: pad(rem(16px));
 }
 
 [part~='content'] {

src/components/calendar/themes/days-view.base.scss

@@ -8,7 +8,7 @@ $row-gap: rem(4px);
     display: flex;
     flex-direction: column;
     outline: none;
-    padding: rem(16px) rem(12px);
+    padding: pad-block(rem(16px)) pad-inline(rem(12px));
     overflow: hidden;
     box-sizing: border-box;
     gap: $row-gap;
@@ -116,7 +116,7 @@ $row-gap: rem(4px);
 [part~='week-number'] {
     order: 0;
     cursor: default;
-    margin-inline-end: $row-gap;
+    margin-inline-end: pad-inline($row-gap);
 }
 
 [part='week-number-inner first'] {

src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss

@@ -17,21 +17,21 @@ $theme: $bootstrap;
     [part='days-view-container'] + [part='days-view-container'] {
         [part='navigation'],
         igc-days-view::part(days-row) {
-            padding-inline: rem(22px);
+            padding-inline: pad-inline(rem(22px));
         }
     }
 
     [part='days-view-container']:first-of-type:not(:only-child) {
         [part='navigation'],
         igc-days-view::part(days-row) {
-            padding-inline-end: rem(22px);
+            padding-inline-end: pad-inline(rem(22px));
         }
     }
 
     [part='days-view-container']:last-of-type:not(:only-child) {
         [part='navigation'],
         igc-days-view::part(days-row) {
-            padding-inline-end: rem(12px);
+            padding-inline-end: pad-inline(rem(12px));
         }
     }
 }

src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss

@@ -7,15 +7,15 @@ $border-size: rem(1px);
 :host([part='days-view']) {
     overflow: hidden;
     position: relative;
-    padding: 0 0 rem(16px);
+    padding: 0 0 pad-block(rem(16px));
 }
 
 [part~='days-row'] {
-    padding: 0 rem(12px);
+    padding: 0 pad-inline(rem(12px));
 }
 
 :host([part='days-view']) + :host([part='days-view']) {
-    margin-inline-start: rem(8px);
+    margin-inline-start: pad-inline(rem(8px));
 }
 
 [part~='days-row'][part~='first'] {

src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss

@@ -4,7 +4,7 @@
 $theme: $bootstrap;
 
 :host {
-    padding-block-start: rem(16px);
+    padding-block-start: pad-block(rem(16px));
 }
 
 [part~='month-inner'],

src/components/calendar/themes/shared/fluent/calendar.fluent.scss

@@ -17,21 +17,21 @@ $theme: $fluent;
     [part='days-view-container'] + [part='days-view-container'] {
         [part='navigation'],
         igc-days-view {
-            padding-inline: rem(22px);
+            padding-inline: pad-inline(rem(22px));
         }
     }
 
     [part='days-view-container']:last-of-type:not(:only-child) {
         [part='navigation'],
         igc-days-view {
-            padding-inline-end: rem(12px);
+            padding-inline-end: pad-inline(rem(12px));
         }
     }
 
     [part='days-view-container']:first-of-type:not(:only-child) {
         [part='navigation'],
         igc-days-view {
-            padding-inline-end: rem(22px);
+            padding-inline-end: pad-inline(rem(22px));
         }
     }
 }

src/components/calendar/themes/shared/indigo/calendar.indigo.scss

@@ -33,21 +33,21 @@ $theme: $indigo;
     [part='days-view-container'] + [part='days-view-container'] {
         [part='navigation'],
         igc-days-view {
-            padding-inline: rem(22px);
+            padding-inline: pad-inline(rem(22px));
         }
     }
 
     [part='days-view-container']:last-of-type:not(:only-child) {
         [part='navigation'],
         igc-days-view {
-            padding-inline-end: rem(12px);
+            padding-inline-end: pad-inline(rem(12px));
         }
     }
 
     [part='days-view-container']:first-of-type:not(:only-child) {
         [part='navigation'],
         igc-days-view {
-            padding-inline-end: rem(22px);
+            padding-inline-end: pad-inline(rem(22px));
         }
     }
 }
@@ -84,7 +84,7 @@ $theme: $indigo;
 
 [part~='navigation-button'] {
     color: var-get($theme, 'navigation-color');
-    padding: rem(5px);
+    padding: pad(rem(5px));
 
     &:hover {
         color: var-get($theme, 'navigation-hover-color');

src/components/calendar/themes/shared/material/calendar.material.scss

@@ -22,21 +22,21 @@ $theme: $material;
     [part='days-view-container'] + [part='days-view-container'] {
         [part='navigation'],
         igc-days-view {
-            padding-inline: rem(22px);
+            padding-inline: pad-inline(rem(22px));
         }
     }
 
     [part='days-view-container']:last-of-type:not(:only-child) {
         [part='navigation'],
         igc-days-view {
-            padding-inline-end: rem(12px);
+            padding-inline-end: pad-inline(rem(12px));
         }
     }
 
     [part='days-view-container']:first-of-type:not(:only-child) {
         [part='navigation'],
         igc-days-view {
-            padding-inline-end: rem(22px);
+            padding-inline-end: pad-inline(rem(22px));
         }
     }
 }
@@ -46,7 +46,7 @@ $theme: $material;
 }
 
 [part='header'] {
-    padding: rem(16px) rem(24px);
+    padding: pad-block(rem(16px)) pad-inline(rem(24px));
     gap: rem(28px);
 }
 
@@ -56,7 +56,7 @@ $theme: $material;
     height: rem(56px);
     color: var-get($theme, 'picker-foreground');
     background: var-get($theme, 'picker-background');
-    padding: 0 rem(24px);
+    padding: 0 pad-inline(rem(24px));
 }
 
 [part='navigation-buttons'] {

src/components/calendar/themes/year-month-view.base.scss

@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     outline: none;
-    padding-block: rem(16px);
+    padding-block: pad-block(rem(16px));
     padding-inline: pad-inline(rem(8px), rem(8px), rem(16px));
     overflow: hidden;
     box-sizing: border-box;
@@ -36,7 +36,7 @@
     user-select: none;
     max-width: rem(240px);
     cursor: pointer;
-    padding: 0 rem(12px);
+    padding: 0 pad-inline(rem(12px));
     margin: 0;
 }
 

src/components/card/themes/card.actions.base.scss

@@ -6,7 +6,7 @@
     flex-flow: column nowrap;
     align-items: flex-end;
     justify-content: space-between;
-    padding: rem(8px) rem(16px);
+    padding: pad-block(rem(8px)) pad-inline(rem(16px));
     flex-basis: min-content;
 }
 
@@ -17,7 +17,7 @@
     ::slotted(igc-icon-button:not(:first-of-type)),
     ::slotted(igc-button:not(:first-of-type)),
     ::slotted(igc-icon:not(:first-of-type)) {
-        margin-inline-start: rem(8px);
+        margin-inline-start: pad-inline(rem(8px));
     }
 }
 

src/components/card/themes/card.content.base.scss

@@ -7,7 +7,7 @@
     display: block;
     width: 100%;
     overflow: auto;
-    padding: rem(16px);
+    padding: pad(rem(16px));
 }
 
 ::slotted(*) {

src/components/card/themes/card.header.base.scss

@@ -7,7 +7,7 @@
     align-items: center;
     align-content: flex-start;
     width: 100%;
-    padding: rem(16px);
+    padding: pad(rem(16px));
     box-sizing: border-box;
 }
 
@@ -39,5 +39,5 @@ header {
 ::slotted([slot='thumbnail']) {
     display: flex;
     align-self: flex-start;
-    margin-inline-end: rem(16px);
+    margin-inline-end: pad-inline(rem(16px));
 }

src/components/card/themes/shared/actions/card.actions.bootstrap.scss

@@ -1,5 +1,5 @@
 @use 'styles/utilities' as *;
 
 :host {
-    padding: rem(16px);
+    padding: pad(rem(16px));
 }

src/components/card/themes/shared/actions/card.actions.indigo.scss

@@ -1,7 +1,7 @@
 @use 'styles/utilities' as *;
 
 :host {
-    padding: rem(16px);
+    padding: pad(rem(16px));
 
     ::slotted(igc-button),
     ::slotted(igc-icon-button) {

src/components/card/themes/shared/container/card.bootstrap.scss

@@ -5,11 +5,11 @@ $theme: $bootstrap;
 
 :host {
     ::slotted(igc-card-content:only-child) {
-        padding-block-end: rem(16px);
+        padding-block-end: pad-block(rem(16px));
     }
 
     ::slotted(igc-card-content:last-child) {
-        padding-block-end: rem(16px);
+        padding-block-end: pad-block(rem(16px));
     }
 }