diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss
index 9cdb215013..27d8d661e1 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss
@@ -1,27 +1,5 @@
 @import '../../../Bit.BlazorUI/Styles/functions.scss';
 
-:root {
-    --bit-ply-inset-top: env(safe-area-inset-top);
-    --bit-ply-inset-left: env(safe-area-inset-left);
-    --bit-ply-inset-right: env(safe-area-inset-right);
-    --bit-ply-inset-bottom: env(safe-area-inset-bottom);
-    //--
-    --bit-ply-width-vw: calc(100vw - var(--bit-ply-inset-left) - var(--bit-ply-inset-right));
-    --bit-ply-height-vh: calc(100vh - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom));
-    --bit-ply-width-per: calc(100% - var(--bit-ply-inset-left) - var(--bit-ply-inset-right));
-    --bit-ply-height-per: calc(100% - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom));
-    --bit-ply-width: calc(var(--win-width) - var(--bit-ply-inset-left) - var(--bit-ply-inset-right));
-    --bit-ply-height: calc(var(--win-height) - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom));
-    //--
-    --bit-ply-inset-inline-start: var(--bit-ply-inset-left);
-    --bit-ply-inset-inline-end: var(--bit-ply-inset-right);
-
-    [dir="rtl"] {
-        --bit-ply-inset-inline-start: var(--bit-ply-inset-right);
-        --bit-ply-inset-inline-end: var(--bit-ply-inset-left);
-    }
-}
-
 .bit-ply {
     width: 100%;
     height: 100%;
@@ -33,21 +11,21 @@
 .bit-ply-top {
     width: 100%;
     z-index: 999999;
-    height: var(--bit-ply-inset-top);
+    height: var(--bit-env-inset-top);
     background-color: $clr-bg-pri;
 }
 
 .bit-ply-bottom {
     width: 100%;
     z-index: 999999;
-    height: var(--bit-ply-inset-bottom);
+    height: var(--bit-env-inset-bottom);
     background-color: $clr-bg-pri;
 }
 
 .bit-ply-center {
     width: 100%;
     display: flex;
-    height: calc(100% - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom));
+    height: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
 }
 
 .bit-ply-main {
@@ -57,19 +35,19 @@
     position: relative;
     scroll-behavior: smooth;
     overscroll-behavior: none;
-    width: calc(100% - var(--bit-ply-inset-left) - var(--bit-ply-inset-right));
+    width: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right));
 }
 
 .bit-ply-left {
     height: 100%;
     z-index: 999999;
-    width: var(--bit-ply-inset-left);
+    width: var(--bit-env-inset-left);
     background-color: $clr-bg-pri;
 }
 
 .bit-ply-right {
     height: 100%;
     z-index: 999999;
-    width: var(--bit-ply-inset-right);
+    width: var(--bit-env-inset-right);
     background-color: $clr-bg-pri;
 }
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss
index 4d58f1782c..eb02b8b603 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss
@@ -1,2 +1,3 @@
-@import "components.scss";
+@import "general.scss";
+@import "components.scss";
 @import "fabric.mdl2.bit.blazoui.extras.scss";
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss
new file mode 100644
index 0000000000..aadd719d1e
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss
@@ -0,0 +1,21 @@
+:root {
+    --bit-env-inset-top: env(safe-area-inset-top);
+    --bit-env-inset-left: env(safe-area-inset-left);
+    --bit-env-inset-right: env(safe-area-inset-right);
+    --bit-env-inset-bottom: env(safe-area-inset-bottom);
+    //--
+    --bit-env-width-vw: calc(100vw - var(--bit-env-inset-left) - var(--bit-env-inset-right));
+    --bit-env-height-vh: calc(100vh - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
+    --bit-env-width-per: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right));
+    --bit-env-height-per: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
+    --bit-env-width: calc(var(--win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right));
+    --bit-env-height: calc(var(--win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom));
+    //--
+    --bit-env-inset-inline-start: var(--bit-env-inset-left);
+    --bit-env-inset-inline-end: var(--bit-env-inset-right);
+
+    [dir="rtl"] {
+        --bit-env-inset-inline-start: var(--bit-env-inset-right);
+        --bit-env-inset-inline-end: var(--bit-env-inset-left);
+    }
+}