diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index 77dfdf071c0..2e82deb4545 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -54,7 +54,7 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding-inline: rem(4px);
+        padding-inline: pad-inline(rem(4px));
     }
 
     %igx-badge--success {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
index 574993cd96a..dfb88eff7af 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
@@ -34,7 +34,7 @@
         justify-content: flex-end;
         flex-wrap: wrap;
         gap: rem(8px);
-        padding: rem(16px) rem(8px);
+        padding: pad-block(rem(16px)) pad-inline(rem(8px));
         min-width: rem(320px);
         background: var-get($theme, 'banner-background');
         box-shadow: inset 0 rem(-1px) 0 0 var-get($theme, 'banner-border-color');
@@ -42,7 +42,7 @@
 
         @if $variant == 'indigo' {
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'banner-border-color');
-            padding: rem(16px);
+            padding: pad(rem(16px));
         }
 
         igc-icon,
@@ -79,7 +79,7 @@
         @if $variant == 'indigo' {
             gap: rem(8px);
         } @else {
-            padding: 0 rem(8px);
+            padding: 0 pad-inline(rem(8px));
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
index cbb9c7412ed..6f21583c88e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
@@ -12,7 +12,7 @@
     $menu-height: rem(56px);
     $item-min-width: rem(80px);
     $item-max-width: rem(168px);
-    $item-padding: 0 rem(12px, 16px);
+    $item-padding: 0 pad-inline(rem(12px, 16px));
 
     %igx-bottom-nav-panel {
         display: block;
@@ -115,7 +115,7 @@
         color: var-get($theme, 'icon-color');
 
         @if $variant != 'indigo' {
-            padding: 0 rem(8px);
+            padding: 0 pad-inline(rem(8px));
             height: rem(24px);
             transform: translateZ(0);
             transition: transform .15s $in-out-quad;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index 358cf91c790..14004190d7e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -42,10 +42,10 @@
     ), $variant);
 
     $header-padding: map.get((
-        'material': rem(16px) rem(24px),
-        'fluent': rem(16px),
-        'bootstrap': rem(16px),
-        'indigo': rem(16px),
+        'material': pad-block(rem(16px)) pad-inline(rem(24px)),
+        'fluent': pad(rem(16px)),
+        'bootstrap': pad(rem(16px)),
+        'indigo': pad(rem(16px)),
     ), $variant);
 
     $arrow-gap: map.get((
@@ -57,8 +57,8 @@
 
     $date-view-row-gap: rem(4px);
 
-    $cal-row-padding: rem(8px);
-    $cal-row-margin: rem(2px) 0;
+    $cal-row-padding: pad(rem(8px));
+    $cal-row-margin: pad-block(rem(2px)) 0;
 
     %parent-container {
         color: var-get($theme, 'content-foreground');
@@ -134,21 +134,21 @@
 
     @if $bootstrap-theme {
         %days-view {
-            padding-block-end: rem(16px);
+            padding-block-end: pad-block(rem(16px));
             padding-block-start: 0;
             padding-inline: 0;
         }
 
         %days-view + %days-view {
             %days-view-row {
-                padding-inline-start: rem(22px);
+                padding-inline-start: pad-inline(rem(22px));
             }
         }
 
         %days-view:first-child,
         %days-view:nth-child(even) {
             %days-view-row {
-                padding-inline-end: rem(22px);
+                padding-inline-end: pad-inline(rem(22px));
             }
         }
 
@@ -156,7 +156,7 @@
         %days-view:last-child,
         %days-view:first-child:only-child {
             %days-view-row {
-                padding-inline-end: rem(12px);
+                padding-inline-end: pad-inline(rem(12px));
             }
         }
 
@@ -185,7 +185,7 @@
             }
 
             %days-view:last-child {
-                padding-inline-end: pad-block(rem(12px));
+                padding-inline-end: pad-inline(rem(12px));
             }
         }
     }
@@ -273,7 +273,7 @@
         display: flex;
 
         @if $bootstrap-theme {
-            padding-block-end: rem(8px);
+            padding-block-end: pad-block(rem(8px));
         } @else {
             margin: 0;
         }
@@ -362,7 +362,7 @@
         gap: rem(24px);
         position: relative;
         height: if($variant == 'indigo', rem(50px), rem(56px));
-        padding-inline: if($variant == 'material', rem(24px), rem(16px));
+        padding-inline: pad-inline(if($variant == 'material', rem(24px), rem(16px)));
         color: var-get($theme, 'picker-foreground');
         background: var-get($theme, 'picker-background');
 
@@ -416,7 +416,7 @@
         cursor: pointer;
 
         @if $variant == 'indigo' {
-            padding: rem(5px);
+            padding: pad(rem(5px));
         }
 
         @if $bootstrap-theme {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
index b7b4da74f09..682731bf427 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
@@ -10,7 +10,7 @@
     $variant: map.get($theme, '_meta', 'theme');
     $not-material-theme: $variant != 'material';
 
-    $card-heading-padding: rem(16px, 16px);
+    $card-heading-padding: pad(rem(16px, 16px));
 
     $card-tgroup-margin: 0 em(16px);
 
@@ -125,7 +125,7 @@
     %igx-card-content {
         display: block;
         width: 100%;
-        padding: rem(16px);
+        padding: pad(rem(16px));
         color: var-get($theme, 'content-text-color');
         overflow: auto;
     }
@@ -150,10 +150,10 @@
 
     %igx-card-actions {
         $card-actions-padding: map.get((
-            'material': rem(8px) rem(16px),
-            'fluent': rem(8px) rem(16px),
-            'bootstrap': rem(16px),
-            'indigo': rem(16px),
+            'material': pad-block(rem(8px)) pad-inline(rem(16px)),
+            'fluent': pad-block(rem(8px)) pad-inline(rem(16px)),
+            'bootstrap': pad(rem(16px)),
+            'indigo': pad(rem(16px)),
         ), $variant);
 
 
@@ -181,17 +181,17 @@
 
     @if $variant == 'bootstrap' {
         %igx-card-content {
-            padding-block-end: rem(24px);
+            padding-block-end: pad-block(rem(24px));
         }
     }
 
     @if $variant == 'indigo' {
         %igx-card-content {
-            padding-block-end: rem(8px);
+            padding-block-end: pad-block(rem(8px));
         }
 
         %igx-card-content:last-child {
-            padding-block-end: rem(16px);
+            padding-block-end: pad-block(rem(16px));
         }
 
         %igx-card-header {
@@ -200,7 +200,7 @@
 
         %igx-card-header:last-child,
         %igx-card-header:first-child {
-            padding-block-end: rem(16px);
+            padding-block-end: pad-block(rem(16px));
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
index f389ee8175b..e3b4e109b69 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
@@ -160,7 +160,7 @@
         justify-content: center;
         align-items: center;
         margin: rem(16px) 0;
-        padding: rem(4px) rem(6px);
+        padding: pad-block(rem(4px)) pad-inline(rem(6px));
         gap: rem(8px);
         list-style: none;
         z-index: 10;
@@ -176,7 +176,7 @@
 
         @if $variant == 'indigo' {
             gap: rem(4px);
-            padding: rem(6px);
+            padding: pad(rem(6px));
         }
     }
 
@@ -207,7 +207,7 @@
         }
 
         @if $variant == 'indigo' {
-            padding: rem(4px) rem(6px);
+            padding: pad-block(rem(4px)) pad-inline(rem(6px));
             min-width: rem(28px);
         }
     }
@@ -444,13 +444,13 @@
             transform: translateY(-50%);
             margin-block: 0;
             margin-inline-end: rem(29px);
-            padding: rem(6px) rem(4px);
+            padding: pad-block(rem(6px)) pad-inline(rem(4px));
             bottom: unset;
         }
 
         %igx-carousel-label-indicator {
             margin-inline-end: rem(16px);
-            padding: rem(4px) rem(6px);
+            padding: pad-block(rem(4px)) pad-inline(rem(6px));
         }
 
         %igx-carousel-indicators--start {
@@ -463,12 +463,12 @@
         @if $variant == 'indigo' {
             %igx-carousel-indicators {
                 margin-inline-end: rem(16px);
-                padding: rem(6px);
+                padding: pad(rem(6px));
             }
 
 
             %igx-carousel-label-indicator {
-                padding: rem(4px) rem(6px);
+                padding: pad-block(rem(4px)) pad-inline(rem(6px));
                 margin-inline-end: rem(16px);
             }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
index 6231ebcbc1e..7b4cdd24724 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -99,7 +99,7 @@
         height: $size;
 
         @if $variant == 'material' {
-            padding: rem(20px);
+            padding: pad(rem(20px));
         }
 
         //ripple color
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
index 861fbadb28d..e17b34ca090 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
@@ -42,7 +42,7 @@
         width: 100%;
 
         @if $variant == 'indigo' {
-            padding: rem(4px);
+            padding: pad(rem(4px));
             gap: rem(8px);
         }
 
@@ -107,10 +107,12 @@
         justify-content: center;
         text-align: center;
         height: var-get($theme, 'size');
-        padding-inline: sizable(
-            map.get($chip-padding, 'compact'),
-            map.get($chip-padding, 'cosy'),
-            map.get($chip-padding, 'comfortable')
+        padding-inline: pad-inline(
+            sizable(
+                map.get($chip-padding, 'compact'),
+                map.get($chip-padding, 'cosy'),
+                map.get($chip-padding, 'comfortable')
+            )
         );
 
         gap: sizable(rem(3px), rem(6px), rem(8px));
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
index 36151648bae..f7dc255abdb 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss
@@ -66,7 +66,7 @@
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        padding: rem(8px);
+        padding: pad(rem(8px));
     }
 
     %date-picker__actions {
@@ -79,9 +79,9 @@
         justify-content: flex-end;
 
         @if $variant == 'indigo' {
-            padding: rem(8px) rem(16px);
+            padding: pad-block(rem(8px)) pad-inline(rem(16px));
         } @else {
-            padding: rem(8px);
+            padding: pad(rem(8px));
         }
 
         gap: rem(8px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
index e2b9ef81250..d523578a7b6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
@@ -17,24 +17,24 @@
     ), $variant);
 
     $dialog-title-padding: map.get((
-        'material': rem(16px) rem(24px) rem(0px) rem(24px),
-        'fluent': rem(16px) rem(24px) rem(24px) rem(24px),
-        'bootstrap': rem(16px),
-        'indigo': rem(24px) rem(24px) 0 rem(24px),
+        'material': pad-block(rem(16px)) pad-inline(rem(24px)) 0,
+        'fluent': pad-block(rem(16px)) pad-inline(rem(24px)) pad-inline(rem(24px)),
+        'bootstrap': pad(rem(16px)),
+        'indigo': pad-block(rem(24px)) pad-inline(rem(24px)) 0,
     ), $variant);
 
     $dialog-message-padding: map.get((
-        'material': rem(14px) rem(24px),
-        'fluent': 0 rem(24px) rem(20px) rem(24px),
-        'bootstrap': rem(16px),
-        'indigo': rem(16px) rem(24px),
+        'material': pad-block(rem(14px)) pad-inline(rem(24px)),
+        'fluent': 0 pad-inline(rem(24px)) pad-block(rem(20px)),
+        'bootstrap': pad(rem(16px)),
+        'indigo': pad-block(rem(16px)) pad-inline(rem(24px)),
     ), $variant);
 
     $dialog-actions-padding: map.get((
-        'material': 0 rem(8px) rem(8px),
-        'fluent': 0 rem(24px) rem(24px) rem(24px),
-        'bootstrap': rem(16px),
-        'indigo': rem(16px) rem(24px) rem(24px) rem(24px),
+        'material': 0 pad-inline(rem(8px)) pad-block(rem(8px)),
+        'fluent': 0 pad-inline(rem(24px)) pad-block(rem(24px)),
+        'bootstrap': pad(rem(16px)),
+        'indigo': pad-block(rem(16px)) pad-inline(rem(24px)) pad-block(rem(24px)),
     ), $variant);
 
     %igx-dialog-display {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
index c5ce992bdc3..3fccc5d8190 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
@@ -25,7 +25,7 @@
         border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 
         @if $variant == 'indigo' {
-            padding: rem(3px);
+            padding: pad(rem(3px));
 
             %igx-drop-down__item {
                 margin-block: rem(2px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
index 3fb86209dbe..fcc8daa06a4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
@@ -9,9 +9,9 @@
     @include css-vars($theme);
     $variant: map.get($theme, '_meta', 'theme');
 
-    $panel-padding: rem(16px) rem(24px);
-    $panel-padding-header-indigo: rem(10px) rem(16px);
-    $panel-padding-body-indigo: rem(4px) rem(16px) rem(16px) rem(16px);
+    $panel-padding: pad-block(rem(16px)) pad-inline(rem(24px));
+    $panel-padding-header-indigo: pad-block(rem(10px)) pad-inline(rem(16px));
+    $panel-padding-body-indigo: pad-block(rem(4px)) pad-inline(rem(16px)) pad-block(rem(16px));
 
     %igx-expansion-panel {
         display: flex;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
index a21bc57ddb5..8ef846b74bd 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -225,7 +225,7 @@
         align-items: center;
 
         @if $variant == 'indigo' {
-            padding: rem(16px) rem(16px) sizable(rem(8px), rem(12px), rem(16px));
+            padding: pad-block(rem(16px)) pad-inline(rem(16px)) pad-block(sizable(rem(8px), rem(12px), rem(16px)));
         } @else {
             padding: pad(rem(4px), rem(8px), rem(16px));
         }
@@ -508,7 +508,7 @@
                     display: flex;
                     flex-direction: column;
                     gap: inherit;
-                    padding: rem(8px);
+                    padding: pad(rem(8px));
                 }
             } @else  {
                 margin-inline: calc(sizable(rem(-4px), rem(-8px), rem(-16px)) * -1);
@@ -721,11 +721,11 @@
     %grid-excel-menu__secondary-footer {
         --ig-size: 2;
 
-        padding-inline: if($variant != 'bootstrap', rem(24px), rem(16px));
-        padding-block-end: if($variant != 'bootstrap', rem(24px), rem(16px));
+        padding-inline: pad-inline(if($variant != 'bootstrap', rem(24px), rem(16px)));
+        padding-block-end: pad-block(if($variant != 'bootstrap', rem(24px), rem(16px)));
 
         @if $bootstrap-theme {
-            padding-block-start: rem(16px);
+            padding-block-start: pad-block(rem(16px));
             border-top: rem(1px) solid color($color: 'gray', $variant: 300);
         }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index 66643c96e65..8d946dc6382 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -687,7 +687,7 @@
             %form-group-prefix:not(:first-child) {
                 border-inline-start-color: var-get($theme, 'warning-secondary-color');
             }
-    
+
             %form-group-suffix:not(:last-child) {
                 border-inline-end-color: var-get($theme, 'warning-secondary-color');
             }
@@ -1586,7 +1586,7 @@
         position: relative;
         display: grid;
         grid-auto-rows: minmax($hint-min-size, auto);
-        padding-inline: $hint-spacing-inline;
+        padding-inline: pad-inline($hint-spacing-inline);
 
         justify-content: space-between;
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
index 92a400fc0f5..90bb814dd6d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
@@ -22,7 +22,7 @@
         width: 100%;
         min-height: rem(56px);
         max-height: rem(128px);
-        padding-inline: $navbar-padding;
+        padding-inline: pad-inline($navbar-padding);
         background: var-get($theme, 'background');
         color: var-get($theme, 'text-color');
         box-shadow: var-get($theme, 'shadow');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
index 520ac50fb9f..e6d2cc1d1a8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
@@ -19,10 +19,10 @@
     ), $variant);
 
     $item-padding: map.get((
-        'material': rem(12px) rem(8px),
-        'fluent': rem(10px) rem(8px),
-        'bootstrap': rem(8px) rem(16px),
-        'indigo': rem(8px) rem(16px),
+        'material': pad-block(rem(12px)) pad-inline(rem(8px)),
+        'fluent': pad-block(rem(10px)) pad-inline(rem(8px)),
+        'bootstrap': pad-block(rem(8px)) pad-inline(rem(16px)),
+        'indigo': pad-block(rem(8px)) pad-inline(rem(16px)),
     ), $variant);
 
     $item-gap: map.get((
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
index 24a89523f5a..5a27bbedd05 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
@@ -12,7 +12,7 @@
     $variant: map.get($theme, '_meta', 'theme');
 
     $snackbar-min-height: rem(48px);
-    $snackbar-padding: rem(7px) rem(24px);
+    $snackbar-padding: pad-block(rem(7px)) pad-inline(rem(24px));
 
     %igx-snackbar-display {
         position: relative;
@@ -41,7 +41,7 @@
         }
 
         @if $variant == 'indigo' {
-            padding: rem(4px) rem(16px);
+            padding: pad-block(rem(4px)) pad-inline(rem(16px));
             min-height: rem(36px);
 
             [igxButton] {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
index 8b47cbb75b4..cf817cbca0c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -30,7 +30,7 @@
 
     $tabs-animation-function: cubic-bezier(.35, 0, .25, 1);
 
-    $item-padding: rem(11px) rem(16px);
+    $item-padding: pad-block(rem(11px)) pad-inline(rem(16px));
 
     $tabs-ripple-theme: ripple-theme(
         $schema: $light-material-schema,
@@ -196,7 +196,7 @@
         }
 
         @if $bootstrap-theme {
-            padding-block: rem(12px);
+            padding-block: pad-block(rem(12px));
             border-start-start-radius: var-get($theme, 'border-radius');
             border-start-end-radius: var-get($theme, 'border-radius');
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
index 9a661698792..59404b85509 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
@@ -139,7 +139,7 @@
 
     %time-picker__item {
         width: rem(46px);
-        padding: rem(5px) rem(10px);
+        padding: pad-block(rem(5px)) pad-inline(rem(10px));
         border-radius: var-get($theme, 'active-item-border-radius');
         height: var-get($theme, 'time-item-size');
         display: flex;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
index 415a9360d88..56b553f5b55 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
@@ -13,10 +13,10 @@
     $margin: rem(42px) auto;
 
     $padding: map.get((
-        'material': rem(10px) rem(16px),
-        'fluent': rem(8px) rem(12px),
-        'bootstrap': rem(12px),
-        'indigo': rem(10px) rem(16px)
+        'material': pad-block(rem(10px)) pad-inline(rem(16px)),
+        'fluent': pad-block(rem(8px)) pad-inline(rem(12px)),
+        'bootstrap': pad(rem(12px)),
+        'indigo': pad-block(rem(10px)) pad-inline(rem(16px))
     ), $variant);
 
     %igx-toast-display {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
index 2af405f6499..66b4eee072b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
@@ -19,7 +19,7 @@
         color: var-get($theme, 'text-color');
         border-radius: var-get($theme, 'border-radius');
         box-shadow: map.get($theme, 'shadow');
-        padding: rem(4px) rem(8px);
+        padding: pad-block(rem(4px)) pad-inline(rem(8px));
         gap: rem(8px);
         min-height: rem(24px);
         min-width: rem(24px);