diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0625d85cc..1d82a1387 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,28 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
     - You can now register and replace icons by reference via the `setIconRef` function. To learn more check out the [documentation](https://www.infragistics.com/webcomponentssite/components/layouts/icon#icon-references).
     - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
 
+### Added
+#### Scrollbar: New customizable CSS variables
+
+We have introduced new CSS variables to allow for more customizable scrollbar styling. This enhancement utilizes the available WebKit pseudo-selectors such as `::-webkit-scrollbar-track`. However, please note that these pseudo-selectors are prefixed with `-webkit-` and are only supported in WebKit-based browsers (e.g., Chrome, Safari).
+
+###### List of Available CSS Variables for `-webkit-` browsers:
+- `--sb-size`: Adjusts the scrollbar size (width and height).
+- `--sb-track-bg-color`: Sets the background color of the scrollbar track.
+- `--sb-track-bg-color-hover`: Sets the background color of the scrollbar track on hover.
+- `--sb-thumb-min-height`: Sets the minimum height of the scrollbar thumb.
+- `--sb-thumb-border-radius`: Sets the border radius of the scrollbar thumb.
+- `--sb-thumb-border-size`: Sets the border size of the scrollbar thumb.
+- `--sb-thumb-border-color`: Sets the border color of the scrollbar thumb.
+- `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
+- `--sb-thumb-bg-color-hover`: Sets the background color of the scrollbar thumb on hover.
+
+For Firefox users, we provide limited scrollbar styling options through the following CSS variables:
+
+- `--sb-size`: Adjusts the scrollbar size.
+- `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
+- `--sb-track-bg-color`: Sets the background color of the scrollbar track.
+
 ### Changed
 - **BREAKING**: Removed `igcFocus` and `igcBlur` events from buttons and inputs - Button, Icon Button, Checkbox, Switch, Combo, Date Time Input, Input, Mask Input, Radios, Select, Textarea.
 
diff --git a/package-lock.json b/package-lock.json
index 0a00a3cf7..c8d04dd52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "globby": "^14.0.2",
         "husky": "^9.1.6",
         "ig-typedoc-theme": "^5.0.4",
-        "igniteui-theming": "^11.0.0",
+        "igniteui-theming": "^12.0.0",
         "keep-a-changelog": "^2.5.3",
         "lint-staged": "^15.2.10",
         "lit-analyzer": "^2.0.3",
@@ -7172,9 +7172,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-11.0.0.tgz",
-      "integrity": "sha512-t2hRgFBcS4QQFzgPwp3V8d5CFgLFWN9GY0GqnoBdTmtHQEm+2hbzrxgA//akUkO7g5Z6WEp5Y4WWaRkPJVy1HQ==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.0.0.tgz",
+      "integrity": "sha512-blSZS1nkgLCoZwyydVXPA5zuvTCto3hIFuBaCAPafxc+3at94DO1YoWnp8l0D/khMVnXdzg+Cps0XQnwE2ThpQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
diff --git a/package.json b/package.json
index beb81e90a..79d897f80 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "globby": "^14.0.2",
     "husky": "^9.1.6",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^11.0.0",
+    "igniteui-theming": "^12.0.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.10",
     "lit-analyzer": "^2.0.3",
diff --git a/src/styles/common/component.scss b/src/styles/common/component.scss
index cbf6f97e8..ceda21eb9 100644
--- a/src/styles/common/component.scss
+++ b/src/styles/common/component.scss
@@ -1,7 +1,7 @@
-@use '../utilities/mixins' as *;
 @use 'igniteui-theming/sass/themes/mixins' as *;
 @use 'igniteui-theming/sass/color/functions' as *;
 @use 'igniteui-theming/sass/typography/functions' as *;
+@use 'styles/themes/base/scrollbars' as *;
 
 :host {
     @include sizable();
@@ -9,17 +9,13 @@
     position: relative;
     box-sizing: border-box;
 
-    @include ig-scrollbar(
-        var(--ig-scrollbar-size),
-        var(--ig-scrollbar-track-background),
-        var(--ig-scrollbar-thumb-background)
-    );
-
     *,
     *::before,
     *::after {
         box-sizing: border-box;
     }
+
+    @include ig-scrollbar();
 }
 
 :host([hidden]),
diff --git a/src/styles/themes/base/_bootstrap.scss b/src/styles/themes/base/_bootstrap.scss
index c79a24dae..0bc8eabe6 100644
--- a/src/styles/themes/base/_bootstrap.scss
+++ b/src/styles/themes/base/_bootstrap.scss
@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }
diff --git a/src/styles/themes/base/_fluent.scss b/src/styles/themes/base/_fluent.scss
index 7e218b494..f05262fa3 100644
--- a/src/styles/themes/base/_fluent.scss
+++ b/src/styles/themes/base/_fluent.scss
@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }
diff --git a/src/styles/themes/base/_indigo.scss b/src/styles/themes/base/_indigo.scss
index 8f0739551..cbed0899b 100644
--- a/src/styles/themes/base/_indigo.scss
+++ b/src/styles/themes/base/_indigo.scss
@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 200)};
-    }
-
     @include theme($palette, $indigo-elevations, $typeface, $type-scale, $variant);
 }
diff --git a/src/styles/themes/base/_material.scss b/src/styles/themes/base/_material.scss
index 7d85ba8c2..6bee4b59c 100644
--- a/src/styles/themes/base/_material.scss
+++ b/src/styles/themes/base/_material.scss
@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }
diff --git a/src/styles/themes/base/_scrollbars.scss b/src/styles/themes/base/_scrollbars.scss
index da30b1a2d..588b7d7d1 100644
--- a/src/styles/themes/base/_scrollbars.scss
+++ b/src/styles/themes/base/_scrollbars.scss
@@ -1,22 +1,54 @@
 @use 'igniteui-theming' as *;
 
-.ig-scrollbar {
-    --size: var(--ig-scrollbar-size, #{rem(16px)});
-    --thumb-background: var(--ig-scrollbar-thumb-background, #{color($color: gray, $variant: 400)});
-    --track-background: var(--ig-scrollbar-track-background, #{color($color: gray, $variant: 100)});
+@mixin ig-scrollbar-vars($schema) {
+    $theme: digest-schema($schema);
 
-    scrollbar-width: var(--size);
-    scrollbar-color: var(--thumb-background) var(--track-background);
+    .ig-scrollbar {
+        @include css-vars-from-theme($theme, 'ig-scrollbar');
+    }
 }
 
-.ig-scrollbar ::-webkit-scrollbar {
-    width: var(--size);
-    height: var(--size);
-    background: var(--track-background);
-}
+@mixin ig-scrollbar() {
+    // The @-moz-document rule is specifically for Firefox because it does not support the WebKit pseudo-selectors for scrollbar styling.
+    /* stylelint-disable-next-line at-rule-no-vendor-prefix */
+    @-moz-document url-prefix() {
+        scrollbar-width: var(--sb-size, initial);
+        scrollbar-color: var(--sb-thumb-bg-color, initial) var(--sb-track-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar {
+        width: var(--sb-size, initial);
+        height: var(--sb-size, initial);
+    }
+
+    ::-webkit-scrollbar-track {
+        background: var(--sb-track-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar-track:hover,
+    ::-webkit-scrollbar-track:active {
+        background: var(--sb-track-bg-color-hover, initial);
+    }
+
+    ::-webkit-scrollbar-thumb {
+        min-height: var(--sb-thumb-min-height, initial);
+        border-radius: var(--sb-thumb-border-radius, initial);
+        border: var(--sb-thumb-border-size, initial) solid var(--sb-thumb-border-color, initial);
+        background-color: var(--sb-thumb-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: var(--sb-thumb-bg-color-hover, initial);
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: var(--sb-corner-bg, initial);
+        border: var(--sb-corner-border-sizem, initial) solid var(--sb-corner-border-color, initial);
+    }
 
-.ig-scrollbar ::-webkit-scrollbar-thumb {
-    background: var(--thumb-background);
+    ::-webkit-scrollbar-track-piece {
+        border: var(--sb-track-border-size, initial) solid var(--sb-track-border-color, initial);
+    }
 }
 
 @media (hover: none) {
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
index 1c7b98549..794150c73 100644
--- a/src/styles/themes/dark/bootstrap.scss
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/bootstrap' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/bootstrap' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/bootstrap.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-bootstrap-scrollbar);
 @include base.root-styles($palette, 'dark');
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 144e1e71a..67530941c 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/fluent' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/fluent' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/fluent.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-fluent-scrollbar);
 @include base.root-styles($palette, 'dark');
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 8f8c55e2d..f472976cd 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/indigo' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/indigo' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/indigo.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-indigo-scrollbar);
 @include base.root-styles($palette, 'dark');
diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss
index d7fa90a42..06032996d 100644
--- a/src/styles/themes/dark/material.scss
+++ b/src/styles/themes/dark/material.scss
@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/material' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/material' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/material.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-material-scrollbar);
 @include base.root-styles($palette, 'dark');
diff --git a/src/styles/themes/light/bootstrap.scss b/src/styles/themes/light/bootstrap.scss
index 972665654..3a61a0845 100644
--- a/src/styles/themes/light/bootstrap.scss
+++ b/src/styles/themes/light/bootstrap.scss
@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/bootstrap' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/bootstrap' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($bootstrap-scrollbar);
 @include base.root-styles($palette, 'light');
diff --git a/src/styles/themes/light/fluent.scss b/src/styles/themes/light/fluent.scss
index 810b469b0..db445920d 100644
--- a/src/styles/themes/light/fluent.scss
+++ b/src/styles/themes/light/fluent.scss
@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/fluent' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/fluent' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($fluent-scrollbar);
 @include base.root-styles($palette, 'light');
diff --git a/src/styles/themes/light/indigo.scss b/src/styles/themes/light/indigo.scss
index a1e4bf3e1..c76350920 100644
--- a/src/styles/themes/light/indigo.scss
+++ b/src/styles/themes/light/indigo.scss
@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/indigo' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/indigo' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($indigo-scrollbar);
 @include base.root-styles($palette, 'light');
diff --git a/src/styles/themes/light/material.scss b/src/styles/themes/light/material.scss
index 18f3d0bcb..c7c2bbb96 100644
--- a/src/styles/themes/light/material.scss
+++ b/src/styles/themes/light/material.scss
@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/material' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/material' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($material-scrollbar);
 @include base.root-styles($palette, 'light');
diff --git a/src/styles/utilities/_index.scss b/src/styles/utilities/_index.scss
index 504efea42..83f83bcf2 100644
--- a/src/styles/utilities/_index.scss
+++ b/src/styles/utilities/_index.scss
@@ -1,4 +1,3 @@
-@forward 'mixins';
 @forward 'functions';
 @forward 'igniteui-theming' hide color, contrast-color;
 @forward 'overwrites';
diff --git a/src/styles/utilities/_mixins.scss b/src/styles/utilities/_mixins.scss
deleted file mode 100644
index 7b26446e5..000000000
--- a/src/styles/utilities/_mixins.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@mixin ig-scrollbar($track-size, $track-bg, $thumb-bg) {
-    // Firefox only
-    scrollbar-width: $track-size;
-    scrollbar-color: $thumb-bg $track-bg;
-
-    // Chromium only
-    ::-webkit-scrollbar {
-        width: $track-size;
-        height: $track-size;
-        background: $track-bg;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background: $thumb-bg;
-    }
-}