diff --git a/lib/content-services/src/lib/flex.scss b/lib/content-services/src/lib/flex.scss
index c11802eec2..d82dff54f4 100644
--- a/lib/content-services/src/lib/flex.scss
+++ b/lib/content-services/src/lib/flex.scss
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use 'sass:map';
 /* stylelint-disable */
 
 // Non-overlapping Material Design breakpoints
@@ -60,22 +61,26 @@ $overlapping-lt: (
 //   background-color: red;
 // }
 @mixin layout-bp($bp) {
-    @if map-has-key($breakpoints, $bp) {
-        $min: map-get(map-get($breakpoints, $bp), begin);
-        $max: map-get(map-get($breakpoints, $bp), end);
+    @if map.has-key($breakpoints, $bp) {
+        $min: map.get(map.get($breakpoints, $bp), begin);
+        $max: map.get(map.get($breakpoints, $bp), end);
+
         @media (min-width: $min) and (max-width: $max) {
             @content;
         }
-    } @else if map-has-key($overlapping-gt, $bp) {
-        $min: map-get($overlapping-gt, $bp);
+    } @else if map.has-key($overlapping-gt, $bp) {
+        $min: map.get($overlapping-gt, $bp);
+
         @media (min-width: $min) {
             @content;
         }
-    } @else if map-has-key($overlapping-lt, $bp) {
-        $max: map-get($overlapping-lt, $bp);
+    } @else if map.has-key($overlapping-lt, $bp) {
+        $max: map.get($overlapping-lt, $bp);
+
         @media (max-width: $max) {
             @content;
         }
     }
 }
+
 /* stylelint-enable */
diff --git a/lib/core/custom-theme/theme/custom-palette-creator.scss b/lib/core/custom-theme/theme/custom-palette-creator.scss
index c9aec44caf..5a77dac366 100644
--- a/lib/core/custom-theme/theme/custom-palette-creator.scss
+++ b/lib/core/custom-theme/theme/custom-palette-creator.scss
@@ -64,8 +64,8 @@
     $dark-text-luminance: $dark-text-luminance + 0.5;
     $background-color-luminance: $background-color-luminance + 0.5;
 
-    $luminance-contrast-for-light-text: $light-text-luminance / $background-color-luminance;
-    $luminance-contrast-for-dark-text: $background-color-luminance / $dark-text-luminance;
+    $luminance-contrast-for-light-text: math.div($light-text-luminance, $background-color-luminance);
+    $luminance-contrast-for-dark-text: math.div($background-color-luminance, $dark-text-luminance);
     $text-colour: $light-text;
 
     @if $luminance-contrast-for-dark-text > $luminance-contrast-for-light-text {
diff --git a/lib/core/shell/src/lib/styles/flex.scss b/lib/core/shell/src/lib/styles/flex.scss
index c11802eec2..d82dff54f4 100644
--- a/lib/core/shell/src/lib/styles/flex.scss
+++ b/lib/core/shell/src/lib/styles/flex.scss
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use 'sass:map';
 /* stylelint-disable */
 
 // Non-overlapping Material Design breakpoints
@@ -60,22 +61,26 @@ $overlapping-lt: (
 //   background-color: red;
 // }
 @mixin layout-bp($bp) {
-    @if map-has-key($breakpoints, $bp) {
-        $min: map-get(map-get($breakpoints, $bp), begin);
-        $max: map-get(map-get($breakpoints, $bp), end);
+    @if map.has-key($breakpoints, $bp) {
+        $min: map.get(map.get($breakpoints, $bp), begin);
+        $max: map.get(map.get($breakpoints, $bp), end);
+
         @media (min-width: $min) and (max-width: $max) {
             @content;
         }
-    } @else if map-has-key($overlapping-gt, $bp) {
-        $min: map-get($overlapping-gt, $bp);
+    } @else if map.has-key($overlapping-gt, $bp) {
+        $min: map.get($overlapping-gt, $bp);
+
         @media (min-width: $min) {
             @content;
         }
-    } @else if map-has-key($overlapping-lt, $bp) {
-        $max: map-get($overlapping-lt, $bp);
+    } @else if map.has-key($overlapping-lt, $bp) {
+        $max: map.get($overlapping-lt, $bp);
+
         @media (max-width: $max) {
             @content;
         }
     }
 }
+
 /* stylelint-enable */
diff --git a/lib/core/src/lib/styles/_flex.scss b/lib/core/src/lib/styles/_flex.scss
index 910fdeaa92..d82dff54f4 100644
--- a/lib/core/src/lib/styles/_flex.scss
+++ b/lib/core/src/lib/styles/_flex.scss
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use 'sass:map';
 /* stylelint-disable */
 
 // Non-overlapping Material Design breakpoints
@@ -23,7 +24,7 @@ $breakpoints: (
     xl: (
         begin: 1920px,
         end: 4999.99px
-    ),
+    )
 ) !default;
 
 // Overlapping breakpoints that are greater than defined
@@ -33,7 +34,7 @@ $overlapping-gt: (
     gt-xs: 600px,
     gt-sm: 960px,
     gt-md: 1280px,
-    gt-lg: 1920px,
+    gt-lg: 1920px
 ) !default;
 
 // Overlapping breakpoints that are less than defined
@@ -43,10 +44,9 @@ $overlapping-lt: (
     lt-sm: 599.9px,
     lt-md: 959.9px,
     lt-lg: 1279.9px,
-    lt-xl: 1919.9px,
+    lt-xl: 1919.9px
 ) !default;
 
-
 // Media Query Mixin, takes a breakpoint and returns a wrapping
 // media query statement
 // e.g.
@@ -61,18 +61,26 @@ $overlapping-lt: (
 //   background-color: red;
 // }
 @mixin layout-bp($bp) {
-    @if map-has-key($breakpoints, $bp) {
-        $min: map-get(map-get($breakpoints, $bp), begin);
-        $max: map-get(map-get($breakpoints, $bp), end);
-        @media (min-width: $min) and (max-width: $max) { @content; }
-    }
-    @else if map-has-key($overlapping-gt, $bp) {
-        $min: map-get($overlapping-gt, $bp);
-        @media (min-width: $min) { @content; }
-    }
-    @else if map-has-key($overlapping-lt, $bp) {
-        $max: map-get($overlapping-lt, $bp);
-        @media (max-width: $max) { @content; }
+    @if map.has-key($breakpoints, $bp) {
+        $min: map.get(map.get($breakpoints, $bp), begin);
+        $max: map.get(map.get($breakpoints, $bp), end);
+
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    } @else if map.has-key($overlapping-gt, $bp) {
+        $min: map.get($overlapping-gt, $bp);
+
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else if map.has-key($overlapping-lt, $bp) {
+        $max: map.get($overlapping-lt, $bp);
+
+        @media (max-width: $max) {
+            @content;
+        }
     }
 }
+
 /* stylelint-enable */
diff --git a/lib/process-services-cloud/src/lib/flex.scss b/lib/process-services-cloud/src/lib/flex.scss
index c11802eec2..d82dff54f4 100644
--- a/lib/process-services-cloud/src/lib/flex.scss
+++ b/lib/process-services-cloud/src/lib/flex.scss
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use 'sass:map';
 /* stylelint-disable */
 
 // Non-overlapping Material Design breakpoints
@@ -60,22 +61,26 @@ $overlapping-lt: (
 //   background-color: red;
 // }
 @mixin layout-bp($bp) {
-    @if map-has-key($breakpoints, $bp) {
-        $min: map-get(map-get($breakpoints, $bp), begin);
-        $max: map-get(map-get($breakpoints, $bp), end);
+    @if map.has-key($breakpoints, $bp) {
+        $min: map.get(map.get($breakpoints, $bp), begin);
+        $max: map.get(map.get($breakpoints, $bp), end);
+
         @media (min-width: $min) and (max-width: $max) {
             @content;
         }
-    } @else if map-has-key($overlapping-gt, $bp) {
-        $min: map-get($overlapping-gt, $bp);
+    } @else if map.has-key($overlapping-gt, $bp) {
+        $min: map.get($overlapping-gt, $bp);
+
         @media (min-width: $min) {
             @content;
         }
-    } @else if map-has-key($overlapping-lt, $bp) {
-        $max: map-get($overlapping-lt, $bp);
+    } @else if map.has-key($overlapping-lt, $bp) {
+        $max: map.get($overlapping-lt, $bp);
+
         @media (max-width: $max) {
             @content;
         }
     }
 }
+
 /* stylelint-enable */
diff --git a/lib/process-services/src/lib/styles/flex.scss b/lib/process-services/src/lib/styles/flex.scss
index c11802eec2..d82dff54f4 100644
--- a/lib/process-services/src/lib/styles/flex.scss
+++ b/lib/process-services/src/lib/styles/flex.scss
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use 'sass:map';
 /* stylelint-disable */
 
 // Non-overlapping Material Design breakpoints
@@ -60,22 +61,26 @@ $overlapping-lt: (
 //   background-color: red;
 // }
 @mixin layout-bp($bp) {
-    @if map-has-key($breakpoints, $bp) {
-        $min: map-get(map-get($breakpoints, $bp), begin);
-        $max: map-get(map-get($breakpoints, $bp), end);
+    @if map.has-key($breakpoints, $bp) {
+        $min: map.get(map.get($breakpoints, $bp), begin);
+        $max: map.get(map.get($breakpoints, $bp), end);
+
         @media (min-width: $min) and (max-width: $max) {
             @content;
         }
-    } @else if map-has-key($overlapping-gt, $bp) {
-        $min: map-get($overlapping-gt, $bp);
+    } @else if map.has-key($overlapping-gt, $bp) {
+        $min: map.get($overlapping-gt, $bp);
+
         @media (min-width: $min) {
             @content;
         }
-    } @else if map-has-key($overlapping-lt, $bp) {
-        $max: map-get($overlapping-lt, $bp);
+    } @else if map.has-key($overlapping-lt, $bp) {
+        $max: map.get($overlapping-lt, $bp);
+
         @media (max-width: $max) {
             @content;
         }
     }
 }
+
 /* stylelint-enable */