diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.html b/projects/igniteui-angular/src/lib/carousel/carousel.component.html
index d79dc110577..f182f061a2e 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel.component.html
+++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.html
@@ -19,7 +19,7 @@
 @if (navigation && slides.length) {
     <button
         igxButton
-        class="igx-carousel__arrow--prev"
+        class="igx-carousel__arrow igx-carousel__arrow--prev"
         [attr.aria-label]="resourceStrings.igx_carousel_previous_slide"
         [disabled]="prevButtonDisabled"
         (click)="prev()"
@@ -31,7 +31,7 @@
 @if (navigation && slides.length) {
     <button
         igxButton
-        class="igx-carousel__arrow--next"
+        class="igx-carousel__arrow igx-carousel__arrow--next"
         [attr.aria-label]="resourceStrings.igx_carousel_next_slide"
         [disabled]="nextButtonDisabled"
         (click)="next()"
@@ -59,7 +59,7 @@
 }
 
 @if (showIndicatorsLabel) {
-    <div [ngClass]="indicatorsClass" class="igx-carousel-label-indicator">
+    <div [ngClass]="indicatorsClass" class="igx-carousel-label-indicator" [class.igx-carousel-label-indicator--vertical]="isVertical">
         <span [id]="labelId" class="igx-carousel__label">{{getCarouselLabel}}</span>
     </div>
 }
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.scss b/projects/igniteui-angular/src/lib/carousel/carousel.component.scss
new file mode 100644
index 00000000000..dd684163cd7
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.scss
@@ -0,0 +1,4 @@
+@use 'themes/base';
+@use 'themes/shared';
+@use 'themes/light';
+@use 'themes/dark';
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
index 98533ee8fa1..5f2e685cf0c 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
+++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
@@ -21,6 +21,7 @@ import {
     TemplateRef,
     ViewChild,
     ViewChildren,
+    ViewEncapsulation,
     booleanAttribute
 } from '@angular/core';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
@@ -84,6 +85,8 @@ export class CarouselHammerConfig extends HammerGestureConfig {
         display: block;
         outline-style: none;
     }`],
+    styleUrl: 'carousel.component.css',
+    encapsulation: ViewEncapsulation.None,
     imports: [IgxButtonDirective, IgxIconComponent, NgClass, NgTemplateOutlet]
 })
 
@@ -459,8 +462,10 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     /** @hidden */
     public get indicatorsClass() {
         return {
+            'igx-carousel-indicators': true,
             ['igx-carousel-indicators--focused']: this._hasKeyboardFocusOnIndicators,
-            [`igx-carousel-indicators--${this.getIndicatorsClass()}`]: true
+            [`igx-carousel-indicators--${this.getIndicatorsClass()}`]: true,
+            'igx-carousel-indicators--vertical': this.isVertical
         };
     }
 
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/_base.scss b/projects/igniteui-angular/src/lib/carousel/themes/_base.scss
new file mode 100644
index 00000000000..9af62c104f5
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/_base.scss
@@ -0,0 +1,296 @@
+@use 'igniteui-theming/sass/animations' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'styles/themes/standalone' as *;
+@use 'light/tokens' as *;
+
+$_theme: $material;
+
+@include layer(base) {
+    @include scale-in-center();
+    @include scale-out-center();
+
+    @include b(igx-carousel) {
+        --nav-btn-border-radius: #{var-get($_theme, 'border-radius')};
+
+        display: flex;
+        position: relative;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        flex-flow: column nowrap;
+
+        @include e(inner) {
+            position: relative;
+            width: 100%;
+            height: inherit;
+            overflow: hidden;
+            outline-style: none;
+            min-height: rem(240px);
+            min-width: rem(300px);
+        }
+
+        @include e(label) {
+            align-items: center;
+        }
+
+        @include e(arrow) {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 3;
+            outline: none;
+            user-select: none;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-width: unset;
+            width: rem(46px);
+            height: rem(46px);
+            cursor: pointer;
+            outline-style: none;
+            transition: all .15s ease-in-out;
+            background: var-get($_theme, 'button-background');
+            box-shadow: var-get($_theme, 'button-elevation');
+            border: rem(1px) solid var-get($_theme, 'button-border-color');
+            border-radius: var(--nav-btn-border-radius);
+
+            [dir='rtl'] & {
+                transform: scaleX(-1);
+            }
+
+            igx-icon {
+                --component-size: 1;
+                color: var-get($_theme, 'button-arrow-color');
+            }
+
+            &:hover {
+                background: var-get($_theme, 'button-hover-background');
+                border-color: var-get($_theme, 'button-hover-border-color');
+
+                igx-icon {
+                    color: var-get($_theme, 'button-hover-arrow-color');
+                }
+            }
+
+            &[igxButton].igx-button--focused {
+                background: var-get($_theme, 'button-background');
+                border: rem(2px) solid var-get($_theme, 'button-focus-border-color');
+
+                igx-icon {
+                    color: var-get($_theme, 'button-focus-border-color');
+                }
+            }
+
+            &[igxButton].igx-button--disabled {
+                background: var-get($_theme, 'button-disabled-background');
+                color: var-get($_theme, 'button-disabled-arrow-color');
+                border-color: var-get($_theme, 'button-disabled-border-color');
+                pointer-events: none;
+                box-shadow: none;
+
+                igx-icon {
+                    color: currentColor;
+                }
+            }
+        }
+
+        @include e(arrow, $m: prev) {
+            inset-inline-start: 0;
+            margin-inline-start: rem(16px);
+        }
+
+        @include e(arrow, $m: next) {
+            inset-inline-end: 0;
+            margin-inline-end: rem(16px);
+        }
+
+        @include m(vertical) {
+            @include e(arrow) {
+                inset-inline-start: unset;
+                inset-block-start: unset;
+                inset-inline-end: 0;
+                margin-inline-end: rem(16px);
+                transform: none;
+
+                igx-icon {
+                    transform: rotate(90deg);
+                }
+            }
+
+            @include e(arrow, $m: prev) {
+                inset-block-start: 0;
+                margin-block-start: rem(16px);
+            }
+    
+            @include e(arrow, $m: next) {
+                inset-block-end: 0;
+                margin-block-end: rem(16px);
+            }
+        }
+    }
+
+    @include b(igx-carousel-indicators) {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: rem(16px) 0;
+        padding: rem(4px) rem(6px);
+        gap: rem(8px);
+        list-style: none;
+        z-index: 10;
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        background: var-get($_theme, 'indicator-background');
+        box-shadow: var-get($_theme, 'button-elevation');
+        border-radius: var-get($_theme, 'border-radius');
+
+        [dir='rtl'] & {
+            transform: translateX(50%);
+        }
+
+        @include e(indicator) {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+
+            &:focus-visible {
+                outline-style: none;
+            }
+        }
+
+        @include m(start) {
+            top: 0;
+        }
+
+        @include m(end) {
+            bottom: 0;
+        }
+
+        @include m(focused) {
+            &::after {
+                position: absolute;
+                content: '';
+                pointer-events: none;
+                width: 100%;
+                height: 100%;
+                border-radius: inherit;
+                border: rem(2px) solid var-get($_theme, 'indicator-focus-color');
+            }
+
+            .igx-nav-dot--active {
+                border-color: var-get($_theme, 'indicator-focus-color');
+    
+                &::after {
+                    background: var-get($_theme, 'indicator-focus-color');
+                }
+            }
+        }
+
+        @include m(vertical) {
+            inset-inline-end: 0;
+            inset-inline-start: unset;
+            flex-direction: column;
+            inset-block-start: 50%;
+            transform: translateY(-50%);
+            margin-block: 0;
+            margin-inline-end: rem(29px);
+            padding: rem(6px) rem(4px);
+            bottom: unset;
+
+            [dir='rtl'] & {
+                transform: translateY(-50%);
+            }
+        }
+
+        @include mx(vertical, start) {
+            inset-inline-end: unset;
+            inset-inline-start: 0;
+            margin-inline-start: rem(16px);
+            margin-inline-end: unset;
+        }
+    }
+
+    @include b(igx-carousel-label-indicator) {
+        @include type-style('caption');
+
+        margin: rem(16px) 0;
+        min-width: rem(46px);
+        box-shadow: none;
+        border-radius: rem(4px);
+        color: var-get($_theme, 'indicator-color');
+        background: var-get($_theme, 'label-indicator-background');
+
+        @include m(vertical) {
+            margin-block: 0;
+            margin-inline-end: rem(16px);
+            padding: rem(4px) rem(6px);
+        }
+    }
+
+    @include b(igx-slide) {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        inset: 0;
+        z-index: -1;
+        background: var-get($_theme, 'slide-background');
+        visibility: hidden;
+
+        img {
+            width: inherit;
+            height: inherit;
+            object-fit: cover;
+            touch-action: none;
+            pointer-events: none;
+        }
+
+        @include m(current) {
+            z-index: 2;
+            visibility: visible;
+        }
+
+        @include m(previous) {
+            z-index: 1;
+            visibility: visible;
+        }
+    }
+
+    @include b(igx-nav-dot) {
+        position: relative;
+        width: rem(12px);
+        height: rem(12px);
+        text-indent: rem(-9999px);
+        border: rem(2px) solid var-get($_theme, 'indicator-border-color');
+        border-radius: border-radius(50%);
+        transition: all .15s $ease-out-quad;
+
+        &::after {
+            @include animation('scale-out-center' .15s $ease-out-quad forwards);
+
+            content: '';
+            position: absolute;
+            border-radius: inherit;
+            background: var-get($_theme, 'indicator-dot-color');
+            inset: rem(1px);
+        }
+
+        &:hover {
+            border-color: var-get($_theme, 'indicator-active-border-color');
+        }
+
+        @include m(active) {
+            border: rem(2px) solid var-get($_theme, 'indicator-active-border-color');
+
+            &::after {
+                @include animation('scale-in-center' .15s $ease-out-quad forwards);
+
+                background: var-get($_theme, 'indicator-active-dot-color');
+            }
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/carousel/themes/dark/_index.scss
new file mode 100644
index 00000000000..d2d93f23dd6
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/dark/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-carousel, $tokens, dark);
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/carousel/themes/dark/_tokens.scss
new file mode 100644
index 00000000000..edae84cb3df
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/dark/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/carousel' as *;
+
+$base: digest-schema($base-dark-carousel);
+$material: digest-schema($dark-material-carousel);
+$bootstrap: digest-schema($dark-bootstrap-carousel);
+$fluent: digest-schema($dark-fluent-carousel);
+$indigo: digest-schema($dark-indigo-carousel);
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/light/_index.scss b/projects/igniteui-angular/src/lib/carousel/themes/light/_index.scss
new file mode 100644
index 00000000000..d369ea79cb9
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/light/_index.scss
@@ -0,0 +1,6 @@
+@use 'sass:meta';
+@use 'tokens';
+@use 'styles/themes/standalone' as *;
+
+$tokens: meta.module-variables(tokens);
+@include themes(igx-carousel, $tokens, light);
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/carousel/themes/light/_tokens.scss
new file mode 100644
index 00000000000..91299c78dc5
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/light/_tokens.scss
@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/carousel' as *;
+
+$base: digest-schema($light-carousel);
+$material: digest-schema($material-carousel);
+$bootstrap: digest-schema($bootstrap-carousel);
+$fluent: digest-schema($fluent-carousel);
+$indigo: digest-schema($indigo-carousel);
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/carousel/themes/shared/_bootstrap.scss
new file mode 100644
index 00000000000..22c630cf19f
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/shared/_bootstrap.scss
@@ -0,0 +1,28 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $bootstrap;
+
+@include themed-block(igx-carousel, bootstrap) {
+    @include e(arrow) {
+        &[igxButton].igx-button--focused {
+            box-shadow: 0 0 0 rem(4px) var-get($_theme, 'button-focus-border-color');
+            border-color: var-get($_theme, 'button-border-color');
+    
+            igx-icon {
+                color: var-get($_theme, 'button-arrow-color');
+            }
+        }
+    }
+}
+
+@include themed-block(igx-carousel-indicators, bootstrap) {
+    @include m(focused) {
+        &::after {
+            border: none;
+            box-shadow: 0 0 0 rem(4px) var-get($_theme, 'button-focus-border-color');
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/carousel/themes/shared/_fluent.scss
new file mode 100644
index 00000000000..efe83db1c24
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/shared/_fluent.scss
@@ -0,0 +1,48 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $fluent;
+$btn-indent: rem(3px);
+
+@include themed-block(igx-carousel, fluent) {
+    @include e(arrow) {
+        &[igxButton].igx-button--focused {
+            border: none;
+    
+            igx-icon {
+                color: var-get($_theme, 'indicator-focus-color');
+            }
+    
+            &::after {
+                position: absolute;
+                content: '';
+                pointer-events: none;
+                inset-block-start: $btn-indent;
+                inset-inline-start: $btn-indent;
+                width: calc(100% - (#{$btn-indent} * 2));
+                height: calc(100% - (#{$btn-indent} * 2));
+                box-shadow: 0 0 0 rem(1px) var-get($_theme, 'button-focus-border-color');
+            }
+        }
+    }
+}
+
+@include themed-block(igx-carousel-indicators, fluent) {
+    @include m(focused) {
+        &::after {
+            border: none;
+            inset-block-start: $btn-indent;
+            inset-inline-start: $btn-indent;
+            width: calc(100% - (#{$btn-indent} * 2));
+            height: calc(100% - (#{$btn-indent} * 2));
+            box-shadow: 0 0 0 rem(1px) var-get($_theme, 'button-focus-border-color');
+            border-radius: 0;
+        }
+    }
+}
+
+@include themed-block(igx-carousel-label-indicator, fluent) {
+    border-radius: rem(2px);
+}
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/carousel/themes/shared/_index.scss
new file mode 100644
index 00000000000..7026806ad45
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/shared/_index.scss
@@ -0,0 +1,3 @@
+@forward 'bootstrap';
+@forward 'fluent';
+@forward 'indigo';
diff --git a/projects/igniteui-angular/src/lib/carousel/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/carousel/themes/shared/_indigo.scss
new file mode 100644
index 00000000000..9e3017cd61a
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/carousel/themes/shared/_indigo.scss
@@ -0,0 +1,129 @@
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/bem' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $indigo;
+
+@include themed-block(igx-carousel, indigo) {
+    @include e(arrow) {
+        width: rem(28px);
+        height: rem(28px);
+        border-width: rem(2px);
+        padding: initial;
+
+        igx-icon {
+            --component-size: 2;
+        }
+
+        &[igxButton].igx-button--focused {
+            box-shadow: 0 0 0 rem(3px) var-get($_theme, 'indicator-focus-color');
+
+            igx-icon {
+                color: var-get($_theme, 'button-arrow-color');
+            }
+        }
+    }
+}
+
+@include themed-block(igx-carousel-indicators, indigo) {
+    gap: rem(4px);
+    padding: rem(6px);
+
+    @include m(focused) {
+        border: none;
+        box-shadow: 0 0 0 rem(3px) var-get($_theme, 'indicator-focus-color');
+
+        .igx-nav-dot--active {
+            border-color: var-get($_theme, 'indicator-active-dot-color');
+            box-shadow: 0 0 0 rem(3px) var-get($_theme, 'indicator-focus-color');
+
+            &::after {
+                background: var-get($_theme, 'indicator-active-dot-color');
+            }
+
+            &:hover {
+                &::after {
+                    background: var-get($_theme, 'indicator-active-hover-dot-color');
+                }
+            }
+        }
+    }
+
+    @include m(vertical) {
+        margin-inline-end: rem(16px);
+        padding: rem(6px);
+    }
+
+    @include mx(vertical, start) {
+        margin-inline-start: rem(16px);
+    }
+}
+
+@include themed-block(igx-carousel-label-indicator, indigo) {
+    border-radius: rem(2px);
+    padding: rem(4px) rem(6px);
+    min-width: rem(28px);
+
+    @include m(vertical) {
+        padding: rem(4px) rem(6px);
+        margin-inline-end: rem(16px);
+    }
+}
+
+@include themed-block(igx-nav-dot, indigo) {
+    width: rem(16px);
+    height: rem(16px);
+    border: unset;
+
+    &::after {
+        width: rem(8px);
+        height: rem(8px);
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        right: unset;
+        bottom: unset;
+        animation: none;
+    }
+
+    &:hover {
+        &::after {
+            background: var-get($_theme, 'indicator-hover-dot-color');
+        }
+
+        &::before {
+            position: absolute;
+            content: '';
+            width: inherit;
+            height: inherit;
+            border: rem(2px) solid var-get($_theme, 'indicator-hover-dot-color');
+            inset-inline-start: 0;
+            top: 0;
+            border-radius: border-radius(50%);
+        }
+    }
+
+    @include m(active) {
+        &::before {
+            position: absolute;
+            content: '';
+            width: inherit;
+            height: inherit;
+            border: rem(2px) solid var-get($_theme, 'indicator-active-dot-color');
+            inset-inline-start: 0;
+            top: 0;
+            border-radius: border-radius(50%);
+        }
+
+        &:hover {
+            &::after {
+                background: var-get($_theme, 'indicator-active-hover-dot-color');
+            }
+
+            &::before {
+                border-color: var-get($_theme, 'indicator-active-hover-dot-color');
+            }
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
index e431e1bb1a4..0b8617a037d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
@@ -3,6 +3,7 @@
 @use 'sass:color';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
+@use '../../../styles/themes/standalone' as *;
 
 ////
 /// @group themes
@@ -258,734 +259,725 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin button($theme) {
-    $button-width: rem(88px);
-
-    $variant: map.get($theme, variant);
-
-    $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
-    $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
-    $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
-    $fab-theme: map.get(map.get($theme, 'themes'), 'fab');
-
-    @include css-vars($flat-theme);
-    @include css-vars($outlined-theme);
-    @include css-vars($contained-theme);
-    @include css-vars($fab-theme);
-
-    $time: map.get((
-        'material': .1s,
-        'fluent': .1s,
-        'bootstrap': .15s,
-        'indigo': .15s
-    ), $variant);
-
-    $button-transition: color $time ease-in-out,
-        background-color $time ease-in-out,
-        border-color $time ease-in-out,
-        box-shadow $time ease-in-out;
-
-    $button-disabled-shadow: none;
-
-    $button-floating-width: rem(56px);
-    $button-floating-height: $button-floating-width;
-
-    $button-padding-inline: (
-        comfortable: rem(16px, 16px),
-        cosy: rem(12px, 16px),
-        compact: rem(8px, 16px)
-    );
-
-    $button-padding-indigo-inline: (
-        comfortable: rem(24px, 16px),
-        cosy: rem(16px, 16px),
-        compact: rem(10px, 16px)
-    );
+    @include layer(base) {
+        $button-width: rem(88px);
+
+        $variant: map.get($theme, variant);
+
+        $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
+        $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
+        $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
+        $fab-theme: map.get(map.get($theme, 'themes'), 'fab');
+
+        @include css-vars($flat-theme);
+        @include css-vars($outlined-theme);
+        @include css-vars($contained-theme);
+        @include css-vars($fab-theme);
+
+        $time: map.get((
+            'material': .1s,
+            'fluent': .1s,
+            'bootstrap': .15s,
+            'indigo': .15s
+        ), $variant);
+
+        $button-transition: color $time ease-in-out,
+            background-color $time ease-in-out,
+            border-color $time ease-in-out,
+            box-shadow $time ease-in-out;
+
+        $button-disabled-shadow: none;
+
+        $button-floating-width: rem(56px);
+        $button-floating-height: $button-floating-width;
+
+        $button-padding-inline: (
+            comfortable: rem(16px, 16px),
+            cosy: rem(12px, 16px),
+            compact: rem(8px, 16px)
+        );
 
-    $button-padding-material-block: (
-        comfortable: rem(7px, 16px),
-        cosy: rem(4px, 16px),
-        compact: rem(1px, 16px)
-    );
+        $button-padding-indigo-inline: (
+            comfortable: rem(24px, 16px),
+            cosy: rem(16px, 16px),
+            compact: rem(10px, 16px)
+        );
 
-    $button-padding-fluent-block: (
-        comfortable: 0,
-        cosy: 0,
-        compact: 0
-    );
+        $button-padding-material-block: (
+            comfortable: rem(7px, 16px),
+            cosy: rem(4px, 16px),
+            compact: rem(1px, 16px)
+        );
 
-    $button-padding-bootstrap-block: (
-        comfortable: rem(6px, 16px),
-        cosy: rem(4px, 16px),
-        compact: rem(2px, 16px)
-    );
+        $button-padding-fluent-block: (
+            comfortable: 0,
+            cosy: 0,
+            compact: 0
+        );
 
-    $button-padding-indigo-block: (
-        comfortable: 0,
-        cosy: 0,
-        compact: 0
-    );
+        $button-padding-bootstrap-block: (
+            comfortable: rem(6px, 16px),
+            cosy: rem(4px, 16px),
+            compact: rem(2px, 16px)
+        );
 
-    $button-padding-inline: map.get((
-        'material': $button-padding-inline,
-        'fluent': $button-padding-inline,
-        'bootstrap': $button-padding-inline,
-        'indigo': $button-padding-indigo-inline,
-    ), $variant);
-
-    $button-padding-block: map.get((
-        'material': $button-padding-material-block,
-        'fluent': $button-padding-fluent-block,
-        'bootstrap': $button-padding-bootstrap-block,
-        'indigo': $button-padding-indigo-block,
-    ), $variant);
-
-    $outlined-button-padding-inline: map.get((
-        'material': $button-padding-inline,
-        'fluent': $button-padding-inline,
-        'bootstrap': $button-padding-inline,
-        'indigo': $button-padding-indigo-inline,
-    ), $variant);
-
-    $outlined-button-padding-block: map.get((
-        'material': $button-padding-material-block,
-        'fluent': $button-padding-fluent-block,
-        'bootstrap': $button-padding-bootstrap-block,
-        'indigo': $button-padding-indigo-block
-    ), $variant);
-
-    $button-floating-padding-block: (
-        comfortable: rem(8px),
-        cosy: rem(4px),
-        compact: 0
-    );
+        $button-padding-indigo-block: (
+            comfortable: 0,
+            cosy: 0,
+            compact: 0
+        );
 
-    $button-floating-padding-inline: (
-        comfortable: rem(14px),
-        cosy: rem(10px),
-        compact: rem(6px)
-    );
+        $button-padding-inline: map.get((
+            'material': $button-padding-inline,
+            'fluent': $button-padding-inline,
+            'bootstrap': $button-padding-inline,
+            'indigo': $button-padding-indigo-inline,
+        ), $variant);
+
+        $button-padding-block: map.get((
+            'material': $button-padding-material-block,
+            'fluent': $button-padding-fluent-block,
+            'bootstrap': $button-padding-bootstrap-block,
+            'indigo': $button-padding-indigo-block,
+        ), $variant);
+
+        $outlined-button-padding-inline: map.get((
+            'material': $button-padding-inline,
+            'fluent': $button-padding-inline,
+            'bootstrap': $button-padding-inline,
+            'indigo': $button-padding-indigo-inline,
+        ), $variant);
+
+        $outlined-button-padding-block: map.get((
+            'material': $button-padding-material-block,
+            'fluent': $button-padding-fluent-block,
+            'bootstrap': $button-padding-bootstrap-block,
+            'indigo': $button-padding-indigo-block
+        ), $variant);
+
+        $button-floating-padding-block: (
+            comfortable: rem(8px),
+            cosy: rem(4px),
+            compact: 0
+        );
 
-    $button-floating-padding-indigo-inline: (
-        comfortable: rem(10px),
-        cosy: rem(8px),
-        compact: rem(6px)
-    );
+        $button-floating-padding-inline: (
+            comfortable: rem(14px),
+            cosy: rem(10px),
+            compact: rem(6px)
+        );
 
-    $items-gap: (
-        comfortable: rem(12px),
-        cosy: rem(8px),
-        compact: rem(4px)
-    );
+        $button-floating-padding-indigo-inline: (
+            comfortable: rem(10px),
+            cosy: rem(8px),
+            compact: rem(6px)
+        );
 
-    $items-gap-indigo-comfortable: rem(8px);
+        $items-gap: (
+            comfortable: rem(12px),
+            cosy: rem(8px),
+            compact: rem(4px)
+        );
 
-    $filtering-row-button-size: (
-        comfortable: rem(40px),
-        cosy: rem(30px),
-        compact: rem(21px)
-    );
+        $items-gap-indigo-comfortable: rem(8px);
 
-    $icon-sizes: map.get((
-        'material': rem(18px),
-        'fluent': rem(18px),
-        'bootstrap': rem(18px),
-        'indigo': rem(16px),
-    ), $variant);
-
-    $icon-in-button-size: $icon-sizes;
-
-    $contained-shadow: map.get((
-        'material': var-get($contained-theme, 'resting-shadow'),
-        'fluent': none,
-        'bootstrap': none,
-        'indigo': none
-    ), $variant);
-
-    $contained-shadow--hover: map.get((
-        'material': var-get($contained-theme, 'hover-shadow'),
-        'fluent': none,
-        'bootstrap': none,
-        'indigo': none
-    ), $variant);
-
-    $contained-shadow--focus: map.get((
-        'material': var-get($contained-theme, 'focus-shadow'),
-        'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
-        'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
-        'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
-    ), $variant);
-
-    $contained-shadow--active: map.get((
-        'material': var-get($contained-theme, 'active-shadow'),
-        'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
-        'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
-        'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
-    ), $variant);
-
-    $fab-shadow: map.get((
-        'material': var-get($fab-theme, 'resting-shadow'),
-        'fluent': none,
-        'bootstrap': none,
-        'indigo': none
-    ), $variant);
-
-    $fab-shadow--hover: map.get((
-        'material': var-get($fab-theme, 'hover-shadow'),
-        'fluent': none,
-        'bootstrap': none,
-        'indigo': none
-    ), $variant);
-
-    $fab-shadow--focus: map.get((
-        'material': var-get($fab-theme, 'focus-shadow'),
-        'fluent':  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
-        'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
-        'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
-    ), $variant);
-
-    $fab-shadow--active: map.get((
-        'material': var-get($fab-theme, 'active-shadow'),
-        'fluent':  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
-        'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
-        'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
-    ), $variant);
-
-    %fluent-border {
-        &::after {
-            $btn-indent: rem(2px);
-            content: '';
-            position: absolute;
-            top: $btn-indent;
-            inset-inline-start: $btn-indent;
-            pointer-events: none;
-            width: calc(100% - (#{$btn-indent} * 2));
-            height: calc(100% - (#{$btn-indent} * 2));
-        }
-    }
-
-    %igx-button-display {
-        @include sizable();
-
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: $button-width;
-        padding-inline: pad-inline(
-            map.get($button-padding-inline, 'compact'),
-            map.get($button-padding-inline, 'cosy'),
-            map.get($button-padding-inline, 'comfortable')
-        );
-        padding-block: pad-block(
-            map.get($button-padding-block, 'compact'),
-            map.get($button-padding-block, 'cosy'),
-            map.get($button-padding-block, 'comfortable')
-        );
-        min-height: var-get($flat-theme, 'size');
-        border: rem(1px) solid var-get($flat-theme, 'border-color');
-        cursor: pointer;
-        user-select: none;
-        outline-style: none;
-        -webkit-tap-highlight-color: transparent;
-        overflow: hidden;
-        white-space: nowrap;
-        transition: $button-transition;
-        gap: pad-inline(
-            map.get($items-gap, 'compact'),
-            map.get($items-gap, 'cosy'),
-            map.get($items-gap, 'comfortable')
+        $filtering-row-button-size: (
+            comfortable: rem(40px),
+            cosy: rem(30px),
+            compact: rem(21px)
         );
 
-        @if $variant == 'indigo' {
-            min-width: rem(28px);
+        $contained-shadow: map.get((
+            'material': var-get($contained-theme, 'resting-shadow'),
+            'fluent': none,
+            'bootstrap': none,
+            'indigo': none
+        ), $variant);
+
+        $contained-shadow--hover: map.get((
+            'material': var-get($contained-theme, 'hover-shadow'),
+            'fluent': none,
+            'bootstrap': none,
+            'indigo': none
+        ), $variant);
+
+        $contained-shadow--focus: map.get((
+            'material': var-get($contained-theme, 'focus-shadow'),
+            'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+            'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
+            'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
+        ), $variant);
+
+        $contained-shadow--active: map.get((
+            'material': var-get($contained-theme, 'active-shadow'),
+            'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+            'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
+            'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
+        ), $variant);
+
+        $fab-shadow: map.get((
+            'material': var-get($fab-theme, 'resting-shadow'),
+            'fluent': none,
+            'bootstrap': none,
+            'indigo': none
+        ), $variant);
+
+        $fab-shadow--hover: map.get((
+            'material': var-get($fab-theme, 'hover-shadow'),
+            'fluent': none,
+            'bootstrap': none,
+            'indigo': none
+        ), $variant);
+
+        $fab-shadow--focus: map.get((
+            'material': var-get($fab-theme, 'focus-shadow'),
+            'fluent':  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+            'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
+            'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
+        ), $variant);
+
+        $fab-shadow--active: map.get((
+            'material': var-get($fab-theme, 'active-shadow'),
+            'fluent':  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+            'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
+            'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
+        ), $variant);
+
+        %fluent-border {
+            &::after {
+                $btn-indent: rem(2px);
+                content: '';
+                position: absolute;
+                top: $btn-indent;
+                inset-inline-start: $btn-indent;
+                pointer-events: none;
+                width: calc(100% - (#{$btn-indent} * 2));
+                height: calc(100% - (#{$btn-indent} * 2));
+            }
         }
 
-        igx-icon {
-            --component-size: var(--ig-size, var(--ig-size-large));
-            display: flex;
+        %igx-button-display {
+            @include sizable();
+
+            position: relative;
+            display: inline-flex;
+            align-items: center;
             justify-content: center;
-            width: var(--igx-icon-size, #{$icon-in-button-size});
-            height: var(--igx-icon-size, #{$icon-in-button-size});
-            font-size: var(--igx-icon-size, #{$icon-in-button-size});
+            min-width: $button-width;
+            padding-inline: pad-inline(
+                map.get($button-padding-inline, 'compact'),
+                map.get($button-padding-inline, 'cosy'),
+                map.get($button-padding-inline, 'comfortable')
+            );
+            padding-block: pad-block(
+                map.get($button-padding-block, 'compact'),
+                map.get($button-padding-block, 'cosy'),
+                map.get($button-padding-block, 'comfortable')
+            );
+            min-height: var-get($flat-theme, 'size');
+            border: rem(1px) solid var-get($flat-theme, 'border-color');
+            cursor: pointer;
+            user-select: none;
+            outline-style: none;
+            -webkit-tap-highlight-color: transparent;
+            overflow: hidden;
+            white-space: nowrap;
             transition: $button-transition;
-        }
-    }
+            gap: pad-inline(
+                map.get($items-gap, 'compact'),
+                map.get($items-gap, 'cosy'),
+                map.get($items-gap, 'comfortable')
+            );
 
-    igx-grid-filtering-row {
-        @if $variant == 'bootstrap' {
-            --filtering-row-button-size: #{sizable(
-                #{map.get($filtering-row-button-size, 'compact')},
-                #{map.get($filtering-row-button-size, 'cosy')},
-                #{map.get($filtering-row-button-size, 'comfortable')}
-            )};
-
-            %igx-button-display {
-                min-height: var(--filtering-row-button-size);
-                padding-block: 0;
-
-                > * {
-                    display: flex;
-                    align-items: center;
-                    height: rem(18px);
-                }
+            @if $variant == 'indigo' {
+                min-width: rem(28px);
             }
-        }
-    }
 
-    %igx-button--flat {
-        --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
-        background: var-get($flat-theme, 'background');
-        color: var-get($flat-theme, 'foreground');
-        border-radius: var-get($flat-theme, 'border-radius');
+            igx-icon {
+                --ig-size: #{if($variant == 'indigo', 2, 1)};
 
-        igx-icon {
-            color: var-get($flat-theme, 'icon-color');
+                display: flex;
+                justify-content: center;
+                transition: $button-transition;
+            }
         }
 
-        &:hover {
-            background: var-get($flat-theme, 'hover-background');
-            color: var-get($flat-theme, 'hover-foreground');
-            border-color: var-get($flat-theme, 'hover-border-color');
+        igx-grid-filtering-row {
+            @if $variant == 'bootstrap' {
+                --filtering-row-button-size: #{sizable(
+                    #{map.get($filtering-row-button-size, 'compact')},
+                    #{map.get($filtering-row-button-size, 'cosy')},
+                    #{map.get($filtering-row-button-size, 'comfortable')}
+                )};
 
-            igx-icon {
-                color: var-get($flat-theme, 'icon-color-hover');
+                %igx-button-display {
+                    min-height: var(--filtering-row-button-size);
+                    padding-block: 0;
+
+                    > * {
+                        display: flex;
+                        align-items: center;
+                        height: rem(18px);
+                    }
+                }
             }
         }
 
-        &:active {
-            background: var-get($flat-theme, 'active-background');
-            color: var-get($flat-theme, 'active-foreground');
-            border-color: var-get($flat-theme, 'active-border-color');
+        %igx-button--flat {
+            --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
+            background: var-get($flat-theme, 'background');
+            color: var-get($flat-theme, 'foreground');
+            border-radius: var-get($flat-theme, 'border-radius');
 
             igx-icon {
-                color: var-get($flat-theme, 'active-foreground');
+                color: var-get($flat-theme, 'icon-color');
             }
 
-            @if $variant == 'indigo' {
+            &:hover {
+                background: var-get($flat-theme, 'hover-background');
+                color: var-get($flat-theme, 'hover-foreground');
+                border-color: var-get($flat-theme, 'hover-border-color');
+
                 igx-icon {
                     color: var-get($flat-theme, 'icon-color-hover');
                 }
             }
-        }
-
-        @if $variant == 'indigo' {
-            border-width: rem(2px);
-            gap: pad-inline(
-                map.get($items-gap, 'compact'),
-                map.get($items-gap, 'cosy'),
-                $items-gap-indigo-comfortable
-            );
-        }
-    }
 
-    %igx-button--flat-focused {
-        background: var-get($flat-theme, 'focus-visible-background');
-        color: var-get($flat-theme, 'focus-visible-foreground');
-        border-color: var-get($flat-theme, 'focus-visible-border-color');
+            &:active {
+                background: var-get($flat-theme, 'active-background');
+                color: var-get($flat-theme, 'active-foreground');
+                border-color: var-get($flat-theme, 'active-border-color');
 
-        igx-icon {
-            color: var-get($flat-theme, 'icon-color');
-        }
+                igx-icon {
+                    color: var-get($flat-theme, 'active-foreground');
+                }
 
-        &:hover {
-            background: var-get($flat-theme, 'focus-hover-background');
-            color: var-get($flat-theme, 'focus-hover-foreground');
+                @if $variant == 'indigo' {
+                    igx-icon {
+                        color: var-get($flat-theme, 'icon-color-hover');
+                    }
+                }
+            }
 
-            igx-icon {
-                color: var-get($flat-theme, 'icon-color-hover');
+            @if $variant == 'indigo' {
+                border-width: rem(2px);
+                gap: pad-inline(
+                    map.get($items-gap, 'compact'),
+                    map.get($items-gap, 'cosy'),
+                    $items-gap-indigo-comfortable
+                );
             }
         }
 
-        &:active {
-            background: var-get($flat-theme, 'focus-background');
-            color: var-get($flat-theme, 'focus-foreground');
+        %igx-button--flat-focused {
+            background: var-get($flat-theme, 'focus-visible-background');
+            color: var-get($flat-theme, 'focus-visible-foreground');
+            border-color: var-get($flat-theme, 'focus-visible-border-color');
 
             igx-icon {
-                color: var-get($flat-theme, 'focus-foreground');
+                color: var-get($flat-theme, 'icon-color');
             }
-        }
-
-        @if $variant == 'bootstrap' {
-            box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
-        }
 
-        @if $variant == 'fluent' {
-            border-color: var-get($flat-theme, 'active-border-color');
+            &:hover {
+                background: var-get($flat-theme, 'focus-hover-background');
+                color: var-get($flat-theme, 'focus-hover-foreground');
 
-            &::after {
-                @extend %fluent-border;
-
-                box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
+                igx-icon {
+                    color: var-get($flat-theme, 'icon-color-hover');
+                }
             }
-        }
-
-        @if $variant == 'indigo' {
-            box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
 
             &:active {
+                background: var-get($flat-theme, 'focus-background');
+                color: var-get($flat-theme, 'focus-foreground');
+
                 igx-icon {
-                    color: var-get($flat-theme, 'icon-color-hover');
+                    color: var-get($flat-theme, 'focus-foreground');
                 }
             }
-        }
-    }
 
-    %igx-button--outlined {
-        --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
-        background: var-get($outlined-theme, 'background');
-        color: var-get($outlined-theme, 'foreground');
-        border-color: var-get($outlined-theme, 'border-color');
-        border-radius: var-get($outlined-theme, 'border-radius');
-        padding-block: pad-block(
-            map.get($outlined-button-padding-block, 'compact'),
-            map.get($outlined-button-padding-block, 'cosy'),
-            map.get($outlined-button-padding-block, 'comfortable')
-        );
-        padding-inline: pad-inline(
-            map.get($outlined-button-padding-inline, 'compact'),
-            map.get($outlined-button-padding-inline, 'cosy'),
-            map.get($outlined-button-padding-inline, 'comfortable')
-        );
+            @if $variant == 'bootstrap' {
+                box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
+            }
 
-        @if $variant == 'indigo' {
-            gap: pad-inline(
-                map.get($items-gap, 'compact'),
-                map.get($items-gap, 'cosy'),
-                $items-gap-indigo-comfortable
-            );
+            @if $variant == 'fluent' {
+                border-color: var-get($flat-theme, 'active-border-color');
 
-            border: rem(2px) solid var-get($outlined-theme, 'border-color');
-        }
+                &::after {
+                    @extend %fluent-border;
 
-        igx-icon {
-            color: var-get($outlined-theme, 'icon-color');
-        }
+                    box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-visible-border-color');
+                }
+            }
 
-        &:hover {
-            background: var-get($outlined-theme, 'hover-background');
-            color: var-get($outlined-theme, 'hover-foreground');
-            border-color: var-get($outlined-theme, 'hover-border-color');
+            @if $variant == 'indigo' {
+                box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');
 
-            igx-icon {
-                color: var-get($outlined-theme, 'icon-color-hover');
+                &:active {
+                    igx-icon {
+                        color: var-get($flat-theme, 'icon-color-hover');
+                    }
+                }
             }
         }
 
-        &:active {
-            background: var-get($outlined-theme, 'active-background');
-            color: var-get($outlined-theme, 'active-foreground');
-            border-color: var-get($outlined-theme, 'active-border-color');
+        %igx-button--outlined {
+            --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
+            background: var-get($outlined-theme, 'background');
+            color: var-get($outlined-theme, 'foreground');
+            border-color: var-get($outlined-theme, 'border-color');
+            border-radius: var-get($outlined-theme, 'border-radius');
+            padding-block: pad-block(
+                map.get($outlined-button-padding-block, 'compact'),
+                map.get($outlined-button-padding-block, 'cosy'),
+                map.get($outlined-button-padding-block, 'comfortable')
+            );
+            padding-inline: pad-inline(
+                map.get($outlined-button-padding-inline, 'compact'),
+                map.get($outlined-button-padding-inline, 'cosy'),
+                map.get($outlined-button-padding-inline, 'comfortable')
+            );
+
+            @if $variant == 'indigo' {
+                gap: pad-inline(
+                    map.get($items-gap, 'compact'),
+                    map.get($items-gap, 'cosy'),
+                    $items-gap-indigo-comfortable
+                );
+
+                border: rem(2px) solid var-get($outlined-theme, 'border-color');
+            }
 
             igx-icon {
-                color: var-get($outlined-theme, 'active-foreground');
+                color: var-get($outlined-theme, 'icon-color');
             }
 
-            @if $variant == 'indigo' {
+            &:hover {
+                background: var-get($outlined-theme, 'hover-background');
+                color: var-get($outlined-theme, 'hover-foreground');
+                border-color: var-get($outlined-theme, 'hover-border-color');
+
                 igx-icon {
                     color: var-get($outlined-theme, 'icon-color-hover');
                 }
             }
-        }
 
-        @if $variant == 'fluent' {
-            border: rem(1px) solid var-get($flat-theme, 'border-color');
-        }
-    }
-
-    %igx-button--outlined-focused {
-        background: var-get($outlined-theme, 'focus-visible-background');
-        color: var-get($outlined-theme, 'focus-visible-foreground');
-        border-color: var-get($outlined-theme, 'focus-visible-border-color');
+            &:active {
+                background: var-get($outlined-theme, 'active-background');
+                color: var-get($outlined-theme, 'active-foreground');
+                border-color: var-get($outlined-theme, 'active-border-color');
 
-        igx-icon {
-            color: var-get($outlined-theme, 'focus-visible-foreground');
-        }
+                igx-icon {
+                    color: var-get($outlined-theme, 'active-foreground');
+                }
 
-        @if $variant == 'bootstrap' {
-            box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
-        } @else if $variant == 'indigo' {
-            box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
+                @if $variant == 'indigo' {
+                    igx-icon {
+                        color: var-get($outlined-theme, 'icon-color-hover');
+                    }
+                }
+            }
 
-            igx-icon {
-                color: var-get($outlined-theme, 'icon-color');
+            @if $variant == 'fluent' {
+                border: rem(1px) solid var-get($flat-theme, 'border-color');
             }
         }
 
-        &:hover {
-            background: var-get($outlined-theme, 'focus-hover-background');
-            color: var-get($outlined-theme, 'focus-hover-foreground');
-            border-color: var-get($outlined-theme, 'hover-border-color');
+        %igx-button--outlined-focused {
+            background: var-get($outlined-theme, 'focus-visible-background');
+            color: var-get($outlined-theme, 'focus-visible-foreground');
+            border-color: var-get($outlined-theme, 'focus-visible-border-color');
 
             igx-icon {
-                color: var-get($outlined-theme, 'icon-color-hover');
+                color: var-get($outlined-theme, 'focus-visible-foreground');
             }
-        }
 
-        &:active {
-            background: var-get($outlined-theme, 'focus-background');
-            color: var-get($outlined-theme, 'focus-foreground');
-            border-color: var-get($outlined-theme, 'active-border-color');
+            @if $variant == 'bootstrap' {
+                box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
+            } @else if $variant == 'indigo' {
+                box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');
 
-            @if $variant == 'indigo' {
                 igx-icon {
-                    color: var-get($outlined-theme, 'icon-color-hover');
+                    color: var-get($outlined-theme, 'icon-color');
                 }
             }
-        }
-
-        @if $variant == 'fluent' {
-            border-color: var-get($outlined-theme, 'focus-border-color');
 
-            &::after {
-                @extend %fluent-border;
+            &:hover {
+                background: var-get($outlined-theme, 'focus-hover-background');
+                color: var-get($outlined-theme, 'focus-hover-foreground');
+                border-color: var-get($outlined-theme, 'hover-border-color');
 
-                box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
+                igx-icon {
+                    color: var-get($outlined-theme, 'icon-color-hover');
+                }
             }
-        }
-    }
 
-    %igx-button--contained {
-        --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
-        color: var-get($contained-theme, 'foreground');
-        background: var-get($contained-theme, 'background');
-        border-color: var-get($contained-theme, 'border-color');
-        border-radius: var-get($contained-theme, 'border-radius');
-        box-shadow: var-get($contained-theme, 'resting-shadow');
+            &:active {
+                background: var-get($outlined-theme, 'focus-background');
+                color: var-get($outlined-theme, 'focus-foreground');
+                border-color: var-get($outlined-theme, 'active-border-color');
+
+                @if $variant == 'indigo' {
+                    igx-icon {
+                        color: var-get($outlined-theme, 'icon-color-hover');
+                    }
+                }
+            }
 
-        igx-icon {
-            color: var-get($contained-theme, 'icon-color');
-        }
+            @if $variant == 'fluent' {
+                border-color: var-get($outlined-theme, 'focus-border-color');
 
-        &:hover {
-            color: var-get($contained-theme, 'hover-foreground');
-            background: var-get($contained-theme, 'hover-background');
-            border-color: var-get($contained-theme, 'hover-border-color');
-            box-shadow: var-get($contained-theme, 'hover-shadow');
+                &::after {
+                    @extend %fluent-border;
 
-            igx-icon {
-                color: var-get($contained-theme, 'icon-color-hover');
+                    box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-border-color');
+                }
             }
         }
 
-        &:active {
-            color: var-get($contained-theme, 'active-foreground');
-            background: var-get($contained-theme, 'active-background');
-            border-color: var-get($contained-theme, 'active-border-color');
-            box-shadow: var-get($contained-theme, 'hover-shadow');
+        %igx-button--contained {
+            --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
+            color: var-get($contained-theme, 'foreground');
+            background: var-get($contained-theme, 'background');
+            border-color: var-get($contained-theme, 'border-color');
+            border-radius: var-get($contained-theme, 'border-radius');
+            box-shadow: var-get($contained-theme, 'resting-shadow');
 
             igx-icon {
-                color: var-get($contained-theme, 'active-foreground');
+                color: var-get($contained-theme, 'icon-color');
             }
-        }
 
-        @if $variant == 'indigo' {
-            border-width: rem(2px);
-            gap: pad-inline(
-                map.get($items-gap, 'compact'),
-                map.get($items-gap, 'cosy'),
-                $items-gap-indigo-comfortable
-            );
+            &:hover {
+                color: var-get($contained-theme, 'hover-foreground');
+                background: var-get($contained-theme, 'hover-background');
+                border-color: var-get($contained-theme, 'hover-border-color');
+                box-shadow: var-get($contained-theme, 'hover-shadow');
 
-            &:active {
                 igx-icon {
-                    color: var-get($outlined-theme, 'icon-color-hover');
+                    color: var-get($contained-theme, 'icon-color-hover');
                 }
             }
-        }
-    }
-
-    %igx-button--contained-focused {
-        background: var-get($contained-theme, 'focus-visible-background');
-        color: var-get($contained-theme, 'focus-visible-foreground');
-        border-color: var-get($contained-theme, 'focus-visible-border-color');
-
-        igx-icon {
-            color: var-get($contained-theme, 'icon-color');
-        }
-
-        @if $variant == 'material' {
-            box-shadow: var-get($contained-theme, 'focus-shadow');
-        } @else {
-            box-shadow: $contained-shadow--active;
-        }
 
-        @if $variant == 'fluent' {
-            border-color: var-get($contained-theme, 'active-border-color');
+            &:active {
+                color: var-get($contained-theme, 'active-foreground');
+                background: var-get($contained-theme, 'active-background');
+                border-color: var-get($contained-theme, 'active-border-color');
+                box-shadow: var-get($contained-theme, 'hover-shadow');
 
-            &::after {
-                @extend %fluent-border;
+                igx-icon {
+                    color: var-get($contained-theme, 'active-foreground');
+                }
+            }
 
-                box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-visible-border-color');
+            @if $variant == 'indigo' {
+                border-width: rem(2px);
+                gap: pad-inline(
+                    map.get($items-gap, 'compact'),
+                    map.get($items-gap, 'cosy'),
+                    $items-gap-indigo-comfortable
+                );
+
+                &:active {
+                    igx-icon {
+                        color: var-get($outlined-theme, 'icon-color-hover');
+                    }
+                }
             }
         }
 
-        &:hover {
-            color: var-get($contained-theme, 'focus-hover-foreground');
-            background: var-get($contained-theme, 'focus-hover-background');
-            border-color: var-get($contained-theme, 'hover-border-color');
+        %igx-button--contained-focused {
+            background: var-get($contained-theme, 'focus-visible-background');
+            color: var-get($contained-theme, 'focus-visible-foreground');
+            border-color: var-get($contained-theme, 'focus-visible-border-color');
 
             igx-icon {
-                color: var-get($contained-theme, 'icon-color-hover');
+                color: var-get($contained-theme, 'icon-color');
             }
 
             @if $variant == 'material' {
                 box-shadow: var-get($contained-theme, 'focus-shadow');
+            } @else {
+                box-shadow: $contained-shadow--active;
             }
-        }
 
-        &:active {
-            color: var-get($contained-theme, 'focus-foreground');
-            background: var-get($contained-theme, 'focus-background');
+            @if $variant == 'fluent' {
+                border-color: var-get($contained-theme, 'active-border-color');
 
-            @if $variant == 'indigo' {
-                igx-icon {
-                    color: var-get($outlined-theme, 'icon-color-hover');
+                &::after {
+                    @extend %fluent-border;
+
+                    box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-visible-border-color');
                 }
             }
-        }
-    }
-
-    %igx-button--round {
-        display: inline-flex;
-        position: relative;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        outline: none;
-        cursor: pointer;
-        transition: $button-transition;
-        user-select: none;
-        -webkit-tap-highlight-color: transparent;
-        overflow: hidden;
-        // hack to allow circular overflow in safari...
-        filter: blur(0);
-    }
-
-    %igx-button--fab {
-        --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
-        padding-block: pad-block(
-            map.get($button-floating-padding-block, 'compact'),
-            map.get($button-floating-padding-block, 'cosy'),
-            map.get($button-floating-padding-block, 'comfortable')
-        );
-        padding-inline: pad-inline(
-            map.get($button-floating-padding-inline, 'compact'),
-            map.get($button-floating-padding-inline, 'cosy'),
-            map.get($button-floating-padding-inline, 'comfortable')
-        );
 
-        @if $variant == 'indigo' {
-            padding-inline: pad-inline(
-                map.get($button-floating-padding-indigo-inline, 'compact'),
-                map.get($button-floating-padding-indigo-inline, 'cosy'),
-                map.get($button-floating-padding-indigo-inline, 'comfortable')
-            );
-        }
+            &:hover {
+                color: var-get($contained-theme, 'focus-hover-foreground');
+                background: var-get($contained-theme, 'focus-hover-background');
+                border-color: var-get($contained-theme, 'hover-border-color');
 
-        min-width: var-get($fab-theme, 'size');
-        min-height: var-get($fab-theme, 'size');
-        line-height: unset;
-        white-space: nowrap;
-        color: var-get($fab-theme, 'foreground');
-        background: var-get($fab-theme, 'background');
-        border-color: var-get($fab-theme, 'border-color');
-        border-radius: var-get($fab-theme, 'border-radius');
-        box-shadow: var-get($fab-theme, 'resting-shadow');
+                igx-icon {
+                    color: var-get($contained-theme, 'icon-color-hover');
+                }
 
-        igx-icon {
-            color: var-get($fab-theme, 'icon-color');
-        }
+                @if $variant == 'material' {
+                    box-shadow: var-get($contained-theme, 'focus-shadow');
+                }
+            }
 
-        &:hover {
-            color: var-get($fab-theme, 'hover-foreground');
-            background: var-get($fab-theme, 'hover-background');
-            border-color: var-get($fab-theme, 'hover-border-color');
-            box-shadow: var-get($fab-theme, 'hover-shadow');
+            &:active {
+                color: var-get($contained-theme, 'focus-foreground');
+                background: var-get($contained-theme, 'focus-background');
 
-            igx-icon {
-                color: var-get($fab-theme, 'icon-color-hover');
+                @if $variant == 'indigo' {
+                    igx-icon {
+                        color: var-get($outlined-theme, 'icon-color-hover');
+                    }
+                }
             }
         }
 
-        &:active {
-            color: var-get($fab-theme, 'active-foreground');
-            background: var-get($fab-theme, 'active-background');
-            border-color: var-get($fab-theme, 'active-border-color');
-            box-shadow: var-get($fab-theme, 'focus-shadow');
+        %igx-button--round {
+            display: inline-flex;
+            position: relative;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            outline: none;
+            cursor: pointer;
+            transition: $button-transition;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+            overflow: hidden;
+            // hack to allow circular overflow in safari...
+            filter: blur(0);
+        }
+
+        %igx-button--fab {
+            --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
+            padding-block: pad-block(
+                map.get($button-floating-padding-block, 'compact'),
+                map.get($button-floating-padding-block, 'cosy'),
+                map.get($button-floating-padding-block, 'comfortable')
+            );
+            padding-inline: pad-inline(
+                map.get($button-floating-padding-inline, 'compact'),
+                map.get($button-floating-padding-inline, 'cosy'),
+                map.get($button-floating-padding-inline, 'comfortable')
+            );
+
+            @if $variant == 'indigo' {
+                padding-inline: pad-inline(
+                    map.get($button-floating-padding-indigo-inline, 'compact'),
+                    map.get($button-floating-padding-indigo-inline, 'cosy'),
+                    map.get($button-floating-padding-indigo-inline, 'comfortable')
+                );
+            }
+
+            min-width: var-get($fab-theme, 'size');
+            min-height: var-get($fab-theme, 'size');
+            line-height: unset;
+            white-space: nowrap;
+            color: var-get($fab-theme, 'foreground');
+            background: var-get($fab-theme, 'background');
+            border-color: var-get($fab-theme, 'border-color');
+            border-radius: var-get($fab-theme, 'border-radius');
+            box-shadow: var-get($fab-theme, 'resting-shadow');
 
             igx-icon {
-                color: var-get($fab-theme, 'active-foreground');
+                color: var-get($fab-theme, 'icon-color');
             }
 
-            @if $variant == 'indigo' {
+            &:hover {
+                color: var-get($fab-theme, 'hover-foreground');
+                background: var-get($fab-theme, 'hover-background');
+                border-color: var-get($fab-theme, 'hover-border-color');
+                box-shadow: var-get($fab-theme, 'hover-shadow');
+
                 igx-icon {
-                    color: var-get($outlined-theme, 'icon-color-hover');
+                    color: var-get($fab-theme, 'icon-color-hover');
                 }
             }
-        }
-    }
 
-    %igx-button--fab-focused {
-        background: var-get($fab-theme, 'focus-visible-background');
-        color: var-get($fab-theme, 'focus-visible-foreground');
-        border-color: var-get($fab-theme, 'focus-visible-border-color');
+            &:active {
+                color: var-get($fab-theme, 'active-foreground');
+                background: var-get($fab-theme, 'active-background');
+                border-color: var-get($fab-theme, 'active-border-color');
+                box-shadow: var-get($fab-theme, 'focus-shadow');
 
-        igx-icon {
-            color: var-get($fab-theme, 'icon-color');
-        }
+                igx-icon {
+                    color: var-get($fab-theme, 'active-foreground');
+                }
 
-        @if $variant == 'material' {
-            box-shadow: var-get($fab-theme, 'focus-shadow');
-        } @else {
-            box-shadow: $contained-shadow--focus;
+                @if $variant == 'indigo' {
+                    igx-icon {
+                        color: var-get($outlined-theme, 'icon-color-hover');
+                    }
+                }
+            }
         }
 
-        @if $variant == 'fluent' {
-            border-color: var-get($contained-theme, 'active-border-color');
+        %igx-button--fab-focused {
+            background: var-get($fab-theme, 'focus-visible-background');
+            color: var-get($fab-theme, 'focus-visible-foreground');
+            border-color: var-get($fab-theme, 'focus-visible-border-color');
 
-            &::after {
-                @extend %fluent-border;
-                $btn-indent: rem(2px);
-                border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$btn-indent});
-                box-shadow: 0 0 0 rem(1px) var-get($fab-theme, 'focus-visible-border-color');
+            igx-icon {
+                color: var-get($fab-theme, 'icon-color');
             }
-        }
 
-        &:hover {
-            color: var-get($fab-theme, 'focus-hover-foreground');
-            background: var-get($fab-theme, 'focus-hover-background');
-            border-color: var-get($fab-theme, 'hover-border-color');
+            @if $variant == 'material' {
+                box-shadow: var-get($fab-theme, 'focus-shadow');
+            } @else {
+                box-shadow: $contained-shadow--focus;
+            }
 
-            igx-icon {
-                color: var-get($fab-theme, 'icon-color-hover');
+            @if $variant == 'fluent' {
+                border-color: var-get($contained-theme, 'active-border-color');
+
+                &::after {
+                    @extend %fluent-border;
+                    $btn-indent: rem(2px);
+                    border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$btn-indent});
+                    box-shadow: 0 0 0 rem(1px) var-get($fab-theme, 'focus-visible-border-color');
+                }
             }
-        }
 
-        &:active {
-            background: var-get($fab-theme, 'focus-background');
-            color: var-get($fab-theme, 'focus-foreground');
+            &:hover {
+                color: var-get($fab-theme, 'focus-hover-foreground');
+                background: var-get($fab-theme, 'focus-hover-background');
+                border-color: var-get($fab-theme, 'hover-border-color');
 
-            @if $variant == 'indigo' {
                 igx-icon {
-                    color: var-get($outlined-theme, 'icon-color-hover');
+                    color: var-get($fab-theme, 'icon-color-hover');
                 }
             }
-        }
-    }
 
-    %igx-button--disabled {
-        background: var-get($flat-theme, 'disabled-background');
-        color: var-get($flat-theme, 'disabled-foreground');
-        border-color: var-get($flat-theme, 'disabled-border-color');
-        pointer-events: none;
-        box-shadow: none;
+            &:active {
+                background: var-get($fab-theme, 'focus-background');
+                color: var-get($fab-theme, 'focus-foreground');
 
-        igx-icon {
-            color: var-get($flat-theme, 'disabled-icon-color');
+                @if $variant == 'indigo' {
+                    igx-icon {
+                        color: var-get($outlined-theme, 'icon-color-hover');
+                    }
+                }
+            }
         }
 
-        &:focus {
+        %igx-button--disabled {
+            background: var-get($flat-theme, 'disabled-background');
+            color: var-get($flat-theme, 'disabled-foreground');
+            border-color: var-get($flat-theme, 'disabled-border-color');
+            pointer-events: none;
             box-shadow: none;
+
+            igx-icon {
+                color: var-get($flat-theme, 'disabled-icon-color');
+            }
+
+            &:focus {
+                box-shadow: none;
+            }
         }
     }
 }
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 d90e486d0b9..d1e9b5cb37a 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
@@ -27,7 +27,7 @@
 /// @param {Color} $indicator-border-color [null] - The idle indicator border color.
 /// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color.
 /// @param {Color} $indicator-active-border-color [null] - The active indicator border color.
-/// @param {Color} $indicator-active-hover-dot-color [null] - The active indicator dot color on hover.
+/// @param {Color} $indicator-active-hover-dot-color [null] - The active indicator dot color on hover in the indigo theme.
 /// @param {box-shadow} $button-shadow [null] - Shadow underneath the previous/next buttons.
 ///
 /// @param {List} $border-radius [null] - The border radius used for carousel component.
@@ -103,7 +103,7 @@
         slide-background: $slide-background,
 
         border-radius: $border-radius,
-        button-shadow: $button-shadow,
+        button-elevation: $button-shadow,
 
         button-background: $button-background,
         button-disabled-background: $button-disabled-background,
@@ -172,7 +172,7 @@
         outline-style: none;
         transition: all .15s ease-in-out;
         background: var-get($theme, 'button-background');
-        box-shadow: var-get($theme, 'button-shadow');
+        box-shadow: var-get($theme, 'button-elevation');
         border: rem(1px) solid var-get($theme, 'button-border-color');
         border-radius: var(--nav-btn-border-radius);
 
@@ -305,7 +305,7 @@
         inset-inline-start: 50%;
         transform: translateX(-50%);
         background: var-get($theme, 'indicator-background');
-        box-shadow: var-get($theme, 'button-shadow');
+        box-shadow: var-get($theme, 'button-elevation');
         border-radius: var-get($theme, 'border-radius');
 
         [dir='rtl'] & {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
index 454ae4d21e6..8dd8832da65 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
@@ -3,6 +3,7 @@
 @use 'sass:color';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
+@use '../../../styles/themes/standalone' as *;
 
 ////
 /// @group themes
@@ -133,248 +134,279 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin icon-button($theme) {
-    $variant: map.get($theme, variant);
-    $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
-    $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
-    $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
-
-    @include css-vars($flat-theme);
-    @include css-vars($outlined-theme);
-    @include css-vars($contained-theme);
-
-    $icon-sizes: map.get((
-        'material': rem(18px),
-        'fluent': rem(18px),
-        'bootstrap': rem(18px),
-        'indigo': rem(16px),
-    ), $variant);
-
-    $icon-in-button-size: $icon-sizes;
-
-    $items-gap: (
-        comfortable: rem(9px),
-        cosy: rem(6px),
-        compact: rem(3px)
-    );
-
-    $btn-indent: rem(2px);
-
-    %igx-icon-button-display {
-        @include sizable();
-
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        user-select: none;
-        outline-style: none;
-        -webkit-tap-highlight-color: transparent;
-        overflow: hidden;
-        white-space: nowrap;
-        transition: box-shadow .2s ease-in, background .15s ease-out;
-        transition-delay: .05s;
-        min-width: unset;
-        min-height: unset;
-        font-size: rem(24px, 24px);
-        padding: 0;
-        gap: pad-inline(
-            map.get($items-gap, 'compact'),
-            map.get($items-gap, 'cosy'),
-            map.get($items-gap, 'comfortable')
+    @include layer(base) {
+        $variant: map.get($theme, variant);
+        $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
+        $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
+        $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
+        $btn-indent: rem(2px);
+
+        @include css-vars($flat-theme);
+        @include css-vars($outlined-theme);
+        @include css-vars($contained-theme);
+
+        $items-gap: (
+            comfortable: rem(9px),
+            cosy: rem(6px),
+            compact: rem(3px)
         );
 
-        igx-icon {
-            --component-size: var(--ig-size, var(--ig-size-large));
-            --size: var(--igx-icon-size, #{$icon-in-button-size});
-            display: flex;
+        %igx-icon-button-display {
+            @include sizable();
+
+            position: relative;
+            display: inline-flex;
+            align-items: center;
             justify-content: center;
-        }
+            cursor: pointer;
+            user-select: none;
+            outline-style: none;
+            -webkit-tap-highlight-color: transparent;
+            overflow: hidden;
+            white-space: nowrap;
+            transition: box-shadow .2s ease-in, background .15s ease-out;
+            transition-delay: .05s;
+            min-width: unset;
+            min-height: unset;
+            font-size: rem(24px, 24px);
+            padding: 0;
+            gap: pad-inline(
+                map.get($items-gap, 'compact'),
+                map.get($items-gap, 'cosy'),
+                map.get($items-gap, 'comfortable')
+            );
+
+            igx-icon {
+                // TODO: Why do we have to comment these out?
+                // --component-size: var(--ig-size, var(--ig-size-large));
+                // --size: var(--igx-icon-size, #{$icon-in-button-size});
+
+                --ig-size: #{if($variant == 'indigo', 2, 1)};
+
+                display: flex;
+                justify-content: center;
+            }
 
-        @if $variant == 'fluent' {
-            transition: color .15s ease-out, background .15s ease-out;
+            @if $variant == 'fluent' {
+                transition: color .15s ease-out, background .15s ease-out;
+
+                &::after {
+                    position: absolute;
+                    content: '';
+                    pointer-events: none;
+                    inset-block-start: $btn-indent;
+                    inset-inline-start: $btn-indent;
+                    width: calc(100% - (#{$btn-indent * 2}));
+                    height: calc(100% - (#{$btn-indent * 2}));
+                }
+            }
 
-            &::after {
-                position: absolute;
-                content: '';
-                pointer-events: none;
-                inset-block-start: $btn-indent;
-                inset-inline-start: $btn-indent;
-                width: calc(100% - (#{$btn-indent * 2}));
-                height: calc(100% - (#{$btn-indent * 2}));
+            @if $variant == 'bootstrap' {
+                transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out;
             }
-        }
 
-        @if $variant == 'bootstrap' {
-            transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out;
+            @if $variant == 'indigo' {
+                transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out, border-color .15s ease-in-out;
+            }
         }
 
-        @if $variant == 'indigo' {
-            transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out, border-color .15s ease-in-out;
-        }
-    }
+        %igx-icon-button--flat {
+            --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
+            width: var-get($flat-theme, 'size');
+            height: var-get($flat-theme, 'size');
+            background: var-get($flat-theme, 'background');
+            color: var-get($flat-theme, 'foreground');
+            border: rem(1px) solid var-get($flat-theme, 'border-color');
+            border-radius: var-get($flat-theme, 'border-radius');
+
+            &:hover {
+                background: var-get($flat-theme, 'hover-background');
+                color: var-get($flat-theme, 'hover-foreground');
+            }
 
-    %igx-icon-button--flat {
-        --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
-        width: var-get($flat-theme, 'size');
-        height: var-get($flat-theme, 'size');
-        background: var-get($flat-theme, 'background');
-        color: var-get($flat-theme, 'foreground');
-        border: rem(1px) solid var-get($flat-theme, 'border-color');
-        border-radius: var-get($flat-theme, 'border-radius');
-
-        &:hover {
-            background: var-get($flat-theme, 'hover-background');
-            color: var-get($flat-theme, 'hover-foreground');
+            @if $variant == 'material' {
+                &:active {
+                    background: var-get($flat-theme, 'focus-background');
+                    color: var-get($flat-theme, 'focus-foreground');
+                }
+            } @else {
+                &:active {
+                    background: var-get($flat-theme, 'active-background');
+                    color: var-get($flat-theme, 'active-foreground');
+                }
+            }
         }
 
-        @if $variant == 'material' {
-            &:active {
-                background: var-get($flat-theme, 'focus-background');
-                color: var-get($flat-theme, 'focus-foreground');
+        [igxIconButton='flat'].igx-button--focused {
+            background: var-get($flat-theme, 'focus-background');
+            color: var-get($flat-theme, 'focus-foreground');
+
+            &:hover {
+                background: var-get($flat-theme, 'focus-hover-background');
+                color: var-get($flat-theme, 'focus-hover-foreground');
             }
-        } @else {
+
             &:active {
                 background: var-get($flat-theme, 'active-background');
                 color: var-get($flat-theme, 'active-foreground');
             }
-        }
-    }
 
-    [igxIconButton='flat'].igx-button--focused {
-        background: var-get($flat-theme, 'focus-background');
-        color: var-get($flat-theme, 'focus-foreground');
+            @if $variant == 'fluent' {
+                &::after {
+                    box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color');
+                }
+            }
 
-        &:hover {
-            background: var-get($flat-theme, 'focus-hover-background');
-            color: var-get($flat-theme, 'focus-hover-foreground');
-        }
+            @if $variant == 'bootstrap' {
+                box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
+            }
 
-        &:active {
-            background: var-get($flat-theme, 'active-background');
-            color: var-get($flat-theme, 'active-foreground');
+            @if $variant == 'indigo' {
+                border-color: var-get($flat-theme, 'border-color');
+                box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color');
+            }
         }
 
-        @if $variant == 'fluent' {
-            &::after {
-                box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color');
+        %igx-icon-button--contained {
+            --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
+            width: var-get($contained-theme, 'size');
+            height: var-get($contained-theme, 'size');
+            background: var-get($contained-theme, 'background');
+            color: var-get($contained-theme, 'foreground');
+            border: rem(1px) solid var-get($contained-theme, 'border-color');
+            border-radius: var-get($contained-theme, 'border-radius');
+
+            &:hover {
+                background: var-get($contained-theme, 'hover-background');
+                color: var-get($contained-theme, 'hover-foreground');
             }
-        }
 
-        @if $variant == 'bootstrap' {
-            box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color');
+            @if $variant == 'material' {
+                &:active {
+                    background: var-get($contained-theme, 'focus-background');
+                    color: var-get($contained-theme, 'focus-foreground');
+                }
+            } @else {
+                &:active {
+                    background: var-get($contained-theme, 'active-background');
+                    color: var-get($contained-theme, 'active-foreground');
+                }
+            }
         }
 
-        @if $variant == 'indigo' {
-            border-color: var-get($flat-theme, 'border-color');
-            box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color');
-        }
-    }
+        %igx-icon-button--contained.igx-button--focused {
+            background: var-get($contained-theme, 'focus-background');
+            color: var-get($contained-theme, 'focus-foreground');
 
-    %igx-icon-button--contained {
-        --component-size: var(--ig-size, #{var-get($contained-theme, 'default-size')});
-        width: var-get($contained-theme, 'size');
-        height: var-get($contained-theme, 'size');
-        background: var-get($contained-theme, 'background');
-        color: var-get($contained-theme, 'foreground');
-        border: rem(1px) solid var-get($contained-theme, 'border-color');
-        border-radius: var-get($contained-theme, 'border-radius');
-
-        &:hover {
-            background: var-get($contained-theme, 'hover-background');
-            color: var-get($contained-theme, 'hover-foreground');
-        }
+            @if $variant != 'fluent' {
+                border-color: var-get($contained-theme, 'focus-border-color');
+            }
 
-        @if $variant == 'material' {
-            &:active {
-                background: var-get($contained-theme, 'focus-background');
-                color: var-get($contained-theme, 'focus-foreground');
+            &:hover {
+                background: var-get($contained-theme, 'focus-hover-background');
+                color: var-get($contained-theme, 'focus-hover-foreground');
             }
-        } @else {
+
             &:active {
                 background: var-get($contained-theme, 'active-background');
                 color: var-get($contained-theme, 'active-foreground');
             }
-        }
-    }
 
-    %igx-icon-button--contained.igx-button--focused {
-        background: var-get($contained-theme, 'focus-background');
-        color: var-get($contained-theme, 'focus-foreground');
+            @if $variant == 'fluent' {
+                &::after {
+                    box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-border-color');
+                }
+            }
 
-        @if $variant != 'fluent' {
-            border-color: var-get($contained-theme, 'focus-border-color');
-        }
+            @if $variant == 'bootstrap' {
+                box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
+            }
 
-        &:hover {
-            background: var-get($contained-theme, 'focus-hover-background');
-            color: var-get($contained-theme, 'focus-hover-foreground');
+            @if $variant == 'indigo' {
+                border-color: var-get($contained-theme, 'border-color');
+                box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color');
+            }
         }
 
-        &:active {
-            background: var-get($contained-theme, 'active-background');
-            color: var-get($contained-theme, 'active-foreground');
-        }
+        %igx-icon-button--outlined {
+            --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
+            width: var-get($outlined-theme, 'size');
+            height: var-get($outlined-theme, 'size');
+            background: var-get($outlined-theme, 'background');
+            color: var-get($outlined-theme, 'foreground');
+            border: rem(1px) solid var-get($outlined-theme, 'border-color');
+            border-radius: var-get($outlined-theme, 'border-radius');
 
-        @if $variant == 'fluent' {
-            &::after {
-                box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-border-color');
+            @if $variant == 'indigo' {
+                border-width: rem(2px);
+
+                &:hover,
+                &:active {
+                    border-color: var-get($outlined-theme, 'foreground');
+                }
             }
-        }
 
-        @if $variant == 'bootstrap' {
-            box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color');
-        }
+            &:hover {
+                background: var-get($outlined-theme, 'hover-background');
+                color: var-get($outlined-theme, 'hover-foreground');
 
-        @if $variant == 'indigo' {
-            border-color: var-get($contained-theme, 'border-color');
-            box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color');
-        }
-    }
+                @if $variant == 'bootstrap' {
+                    border-color: var-get($outlined-theme, 'hover-background');
+                }
+            }
 
-    %igx-icon-button--outlined {
-        --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
-        width: var-get($outlined-theme, 'size');
-        height: var-get($outlined-theme, 'size');
-        background: var-get($outlined-theme, 'background');
-        color: var-get($outlined-theme, 'foreground');
-        border: rem(1px) solid var-get($outlined-theme, 'border-color');
-        border-radius: var-get($outlined-theme, 'border-radius');
+            @if $variant == 'material' {
+                border: none;
 
-        @if $variant == 'indigo' {
-            border-width: rem(2px);
+                &::after {
+                    position: absolute;
+                    content: '';
+                    inset: 0;
+                    box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
+                    border-radius: inherit;
+                }
 
-            &:hover,
-            &:active {
-                border-color: var-get($outlined-theme, 'foreground');
+                &:active {
+                    background: var-get($outlined-theme, 'focus-background');
+                    color: var-get($outlined-theme, 'focus-foreground');
+                }
+            } @else {
+                &:active {
+                    background: var-get($outlined-theme, 'active-background');
+                    color: var-get($outlined-theme, 'active-foreground');
+
+                    @if $variant == 'bootstrap' {
+                        border-color: var-get($outlined-theme, 'focus-border-color');
+                    }
+                }
             }
         }
 
-        &:hover {
-            background: var-get($outlined-theme, 'hover-background');
-            color: var-get($outlined-theme, 'hover-foreground');
+        [igxIconButton='outlined'].igx-button--focused {
+            background: var-get($outlined-theme, 'focus-background');
+            color: var-get($outlined-theme, 'focus-foreground');
 
-            @if $variant == 'bootstrap' {
-                border-color: var-get($outlined-theme, 'hover-background');
-            }
-        }
+            @if $variant == 'material' {
+                border: none;
 
-        @if $variant == 'material' {
-            border: none;
+                &::after {
+                    box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color');
+                }
+            }
 
-            &::after {
-                position: absolute;
-                content: '';
-                inset: 0;
-                box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'border-color');
-                border-radius: inherit;
+            @if $variant != 'bootstrap' {
+                border-color: var-get($outlined-theme, 'focus-border-color');
             }
 
-            &:active {
-                background: var-get($outlined-theme, 'focus-background');
-                color: var-get($outlined-theme, 'focus-foreground');
+            &:hover {
+                background: var-get($contained-theme, 'focus-hover-background');
+                color: var-get($contained-theme, 'focus-hover-foreground');
+
+                @if $variant == 'bootstrap' {
+                    border-color: var-get($outlined-theme, 'focus-hover-background');
+                }
             }
-        } @else {
+
             &:active {
                 background: var-get($outlined-theme, 'active-background');
                 color: var-get($outlined-theme, 'active-foreground');
@@ -383,77 +415,42 @@
                     border-color: var-get($outlined-theme, 'focus-border-color');
                 }
             }
-        }
-    }
-
-    [igxIconButton='outlined'].igx-button--focused {
-        background: var-get($outlined-theme, 'focus-background');
-        color: var-get($outlined-theme, 'focus-foreground');
-
-        @if $variant == 'material' {
-            border: none;
-
-            &::after {
-                box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color');
-            }
-        }
 
-        @if $variant != 'bootstrap' {
-            border-color: var-get($outlined-theme, 'focus-border-color');
-        }
+            @if $variant == 'fluent' {
+                border: rem(1px) solid var-get($outlined-theme, 'border-color');
 
-        &:hover {
-            background: var-get($contained-theme, 'focus-hover-background');
-            color: var-get($contained-theme, 'focus-hover-foreground');
-
-            @if $variant == 'bootstrap' {
-                border-color: var-get($outlined-theme, 'focus-hover-background');
+                &::after {
+                    box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color');
+                }
             }
-        }
-
-        &:active {
-            background: var-get($outlined-theme, 'active-background');
-            color: var-get($outlined-theme, 'active-foreground');
 
             @if $variant == 'bootstrap' {
-                border-color: var-get($outlined-theme, 'focus-border-color');
+                box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
             }
-        }
 
-        @if $variant == 'fluent' {
-            border: rem(1px) solid var-get($outlined-theme, 'border-color');
+            @if $variant == 'indigo' {
+                border-color: var-get($outlined-theme, 'border-color');
+                box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color');
 
-            &::after {
-                box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color');
+                &:hover,
+                &:active {
+                    border-color: var-get($outlined-theme, 'foreground');
+                }
             }
         }
 
-        @if $variant == 'bootstrap' {
-            box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color');
-        }
-
-        @if $variant == 'indigo' {
-            border-color: var-get($outlined-theme, 'border-color');
-            box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color');
+        %igx-button--disabled {
+            background: var-get($flat-theme, 'disabled-background');
+            color: var-get($flat-theme, 'disabled-foreground');
+            border-color: var-get($flat-theme, 'disabled-border-color');
+            pointer-events: none;
+            box-shadow: none;
 
-            &:hover,
-            &:active {
-                border-color: var-get($outlined-theme, 'foreground');
+            &:focus {
+                box-shadow: none;
             }
         }
     }
-
-    %igx-button--disabled {
-        background: var-get($flat-theme, 'disabled-background');
-        color: var-get($flat-theme, 'disabled-foreground');
-        border-color: var-get($flat-theme, 'disabled-border-color');
-        pointer-events: none;
-        box-shadow: none;
-
-        &:focus {
-            box-shadow: none;
-        }
-    }
 }
 
 /// Adds typography styles for the igx-icon-button component.
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index d4aceb3ab6f..16843b59293 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -208,13 +208,13 @@
     //     @include card($card-theme-map);
     // }
 
-    @if is-used('igx-carousel', $exclude) {
-        $carousel-theme-map: carousel-theme(
-            $schema: $schema,
-        );
-        $carousel-theme-map: meta.call($theme-handler, $carousel-theme-map);
-        @include carousel($carousel-theme-map);
-    }
+    // @if is-used('igx-carousel', $exclude) {
+    //     $carousel-theme-map: carousel-theme(
+    //         $schema: $schema,
+    //     );
+    //     $carousel-theme-map: meta.call($theme-handler, $carousel-theme-map);
+    //     @include carousel($carousel-theme-map);
+    // }
 
     // @if is-used('igx-splitter', $exclude) {
     //     $splitter-theme-map: splitter-theme(