diff --git a/README.md b/README.md
index 0c066d5a..543ec8d8 100644
--- a/README.md
+++ b/README.md
@@ -139,7 +139,7 @@ import 'ebs-design/dist/styles/scrollbar.scss';
 
 ```scss
 // Default base size & colors of scrollbar
-$scrollbar-size: math.div($gutter-size, 2);
+$scrollbar-size: calc($gutter-size / 2);
 $scrollbar-track-background-color: $background-content;
 $scrollbar-thumb-background-color: $border-color;
 $scrollbar-thumb-hover-background-color: var(--primary-color);
diff --git a/package.json b/package.json
index 072843e8..3d515005 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ebs-design",
-  "version": "0.0.1-beta.128",
+  "version": "0.0.1-beta.129",
   "description": "EBS Design System React UI elements.",
   "author": "EBS Integrator <contact@ebs-integrator.com> (https://ebs-integrator.com/)",
   "maintainers": [
diff --git a/src/components/ReadMe.stories.mdx b/src/components/ReadMe.stories.mdx
index 3b23758b..c763502d 100644
--- a/src/components/ReadMe.stories.mdx
+++ b/src/components/ReadMe.stories.mdx
@@ -122,7 +122,7 @@ import 'ebs-design/dist/styles/scrollbar.scss';
 
 ```scss
 // Default base size & colors of scrollbar
-$scrollbar-size: math.div($gutter-size, 2);
+$scrollbar-size: calc($gutter-size / 2);
 $scrollbar-track-background-color: $background-content;
 $scrollbar-thumb-background-color: $border-color;
 $scrollbar-thumb-hover-background-color: var(--primary-color);
diff --git a/src/components/Variables.stories.mdx b/src/components/Variables.stories.mdx
index 432ac461..f1aa9a1f 100644
--- a/src/components/Variables.stories.mdx
+++ b/src/components/Variables.stories.mdx
@@ -311,7 +311,7 @@ $label-padding: 0 12px !default;
 $label-color: $text-color !default;
 $label-border: 1px solid !default;
 $label-border-radius: $border-radius !default;
-$label-circle-border-radius: math.div($label-height, 2) !default;
+$label-circle-border-radius: calc($label-height / 2) !default;
 
 // Sidebar
 //
@@ -362,7 +362,7 @@ $sort-by-text-hover-color: $white !default;
 // Scrollbar
 //
 // Define base size & colors of scrollbar
-$scrollbar-size: math.div($gutter-size, 2) !default;
+$scrollbar-size: calc($gutter-size / 2) !default;
 $scrollbar-track-background-color: $background-content !default;
 $scrollbar-thumb-background-color: $border-color !default;
 $scrollbar-thumb-hover-background-color: $primary-color !default;
diff --git a/src/components/atoms/Avatar/Avatar.scss b/src/components/atoms/Avatar/Avatar.scss
index ddf56054..76d71621 100644
--- a/src/components/atoms/Avatar/Avatar.scss
+++ b/src/components/atoms/Avatar/Avatar.scss
@@ -118,7 +118,7 @@
 
     &-alt {
       color: #333;
-      padding: rem(0 math.div($gutter-size, 2));
+      padding: rem(0 calc($gutter-size / 2));
       border-top-right-radius: rem($border-radius);
       border-bottom-right-radius: rem($border-radius);
       font-size: rem(9px);
diff --git a/src/components/atoms/Input/Input.scss b/src/components/atoms/Input/Input.scss
index 5c2c6463..c6810aa1 100644
--- a/src/components/atoms/Input/Input.scss
+++ b/src/components/atoms/Input/Input.scss
@@ -108,7 +108,7 @@
   }
 
   &__wrapper:not(.has-prefix) &__prefix + &__container {
-    padding-left: rem($gutter-size + math.div($gutter-size, 2));
+    padding-left: rem($gutter-size + п($gutter-size, 2));
   }
 
   &__suffix {
@@ -138,7 +138,7 @@
 
 .ebs-input__clear {
   position: absolute;
-  right: rem(math.div($gutter-size, 2));
+  right: rem(calc($gutter-size, 2));
   top: 50%;
   color: $text-color;
   transform: translate3d(0, -50%, 0);
diff --git a/src/components/atoms/Label/Label.scss b/src/components/atoms/Label/Label.scss
index b2cdf449..7e832e34 100644
--- a/src/components/atoms/Label/Label.scss
+++ b/src/components/atoms/Label/Label.scss
@@ -59,7 +59,7 @@
     height: rem($gutter-size);
     float: left;
     padding: 0;
-    margin-right: rem(math.div($gutter-size, 2));
+    margin-right: rem(calc($gutter-size / 2));
   }
 
   &--circle {
diff --git a/src/components/atoms/Tooltip/Tooltip.scss b/src/components/atoms/Tooltip/Tooltip.scss
index e14e4446..49d527f9 100644
--- a/src/components/atoms/Tooltip/Tooltip.scss
+++ b/src/components/atoms/Tooltip/Tooltip.scss
@@ -16,8 +16,8 @@
   }
 
   &__trigger {
-    margin: rem(math.div(-$gutter-size, 2));
-    padding: rem(math.div($gutter-size, 2));
+    margin: rem(calc(-$gutter-size / 2));
+    padding: rem(calc($gutter-size / 2));
   }
 
   &__wrapper.ebs-tooltip--overtop {
@@ -59,12 +59,12 @@
 
   &__wrapper[data-popper-placement*='top'],
   &__wrapper[data-popper-placement*='bottom'] {
-    margin: rem(math.div(-$gutter-size, 4) - 1px 0);
+    margin: rem(calc(-$gutter-size / 4) - 1px 0);
   }
 
   &__wrapper[data-popper-placement*='left'],
   &__wrapper[data-popper-placement*='right'] {
-    margin: rem(0 math.div(-$gutter-size, 4) - 1px);
+    margin: rem(0 calc(-$gutter-size / 4) - 1px);
   }
 
   &__wrapper[data-popper-placement*='top'] &__arrow {
diff --git a/src/components/molecules/InputPhone/InputPhone.scss b/src/components/molecules/InputPhone/InputPhone.scss
index 2ff4d987..9c7c3c31 100644
--- a/src/components/molecules/InputPhone/InputPhone.scss
+++ b/src/components/molecules/InputPhone/InputPhone.scss
@@ -115,7 +115,7 @@
     cursor: pointer;
     top: 50%;
     color: $text-color;
-    right: rem(math.div($gutter-size, 2));
+    right: rem(calc($gutter-size / 2));
     font-size: rem(22px);
     padding: rem(0 7px);
     margin: rem(0 -7px);
diff --git a/src/components/molecules/Loader/Loader.scss b/src/components/molecules/Loader/Loader.scss
index b704f23d..3a8341e1 100644
--- a/src/components/molecules/Loader/Loader.scss
+++ b/src/components/molecules/Loader/Loader.scss
@@ -62,9 +62,9 @@
     &--small {
       border: 2px solid $grey-500;
       border-top: 2px solid var(--primary-color);
-      width: rem(#{math.div($base-size, 2)});
-      height: rem(#{math.div($base-size, 2)});
-      top: calc(50% - #{math.div($base-size, 4)});
+      width: rem(#{calc($base-size / 2)});
+      height: rem(#{calc($base-size / 2)});
+      top: calc(50% - $base-size / 4);
     }
 
     &--middle {
@@ -72,8 +72,8 @@
       border-top: 2px solid var(--primary-color);
       width: rem(#{$base-size - $gutter-size});
       height: rem(#{$base-size - $gutter-size});
-      top: calc(50% - #{math.div(($base-size - $gutter-size), 2)});
-      left: calc(50% - #{math.div(($base-size - $gutter-size), 2)});
+      top: calc(50% - ($base-size - $gutter-size) / 2);
+      left: calc(50% - ($base-size - $gutter-size) / 2);
     }
 
     &--regular {
diff --git a/src/components/molecules/Notify/Notify.scss b/src/components/molecules/Notify/Notify.scss
index b7a27b6f..b91cc4fa 100644
--- a/src/components/molecules/Notify/Notify.scss
+++ b/src/components/molecules/Notify/Notify.scss
@@ -84,7 +84,7 @@
     &-close {
       position: absolute;
       right: 0;
-      top: rem(math.div($gutter-size, 4));
+      top: rem(calc($gutter-size / 4));
     }
 
     &--regular {
diff --git a/src/components/molecules/Select/Select.scss b/src/components/molecules/Select/Select.scss
index 7a60c6dc..f954ae54 100644
--- a/src/components/molecules/Select/Select.scss
+++ b/src/components/molecules/Select/Select.scss
@@ -112,12 +112,12 @@
     @include hiddenScroll;
     color: $text-color-secondary;
     width: 100%;
-    margin-right: rem(math.div($gutter-size, 2));
+    margin-right: rem(calc($gutter-size / 2));
     min-height: 1em;
 
     .ebs-input__container {
       z-index: 2;
-      padding-left: rem(math.div($gutter-size, 4));
+      padding-left: rem(calc($gutter-size / 4));
       min-width: rem(80px);
 
       .ebs-input__wrapper {
@@ -151,7 +151,7 @@
 
     .ebs-label__suffix {
       margin-top: rem(-1px);
-      right: rem(math.div($label-font-size, 2));
+      right: rem(calc($label-font-size / 2));
     }
   }
 
@@ -163,7 +163,7 @@
   }
 
   &-label:not(:last-child) {
-    margin-right: rem(math.div($label-font-size, 2));
+    margin-right: rem(calc($label-font-size / 2));
   }
 
   &__wrapper {
@@ -256,7 +256,7 @@
   .ebs-select-value {
     .ebs-avatar__inline {
       &-alt {
-        margin-left: rem(math.div($gutter-size, 2));
+        margin-left: rem(calc($gutter-size / 2));
       }
 
       > .ebs-avatar {
diff --git a/src/components/molecules/Select/components/Options/Options.scss b/src/components/molecules/Select/components/Options/Options.scss
index ab97a977..bcfc0090 100644
--- a/src/components/molecules/Select/components/Options/Options.scss
+++ b/src/components/molecules/Select/components/Options/Options.scss
@@ -8,7 +8,7 @@
   overflow: hidden;
 
   &--multiple &-item-text {
-    padding-right: rem($gutter-size + math.div($gutter-size, 2));
+    padding-right: rem($gutter-size + calc($gutter-size / 2));
   }
 
   & > &-search,
diff --git a/src/components/organisms/Actions/Actions.scss b/src/components/organisms/Actions/Actions.scss
index c72a4c28..6bccae7d 100644
--- a/src/components/organisms/Actions/Actions.scss
+++ b/src/components/organisms/Actions/Actions.scss
@@ -33,7 +33,7 @@
 
   &-item .loader-display {
     display: inline-block;
-    margin-right: rem(math.div($gutter-size, 2));
+    margin-right: rem(calc($gutter-size / 2));
     vertical-align: middle;
   }
 
diff --git a/src/components/organisms/Layout/Layout.scss b/src/components/organisms/Layout/Layout.scss
index ab0c4c20..d50ee113 100644
--- a/src/components/organisms/Layout/Layout.scss
+++ b/src/components/organisms/Layout/Layout.scss
@@ -139,7 +139,7 @@
 
     &--toggled .ebs-label {
       @include text-ellipsis;
-      padding: rem(0 math.div($gutter-size, 3));
+      padding: rem(0 calc($gutter-size / 3));
     }
   }
 
diff --git a/src/components/organisms/Modal/Modal.scss b/src/components/organisms/Modal/Modal.scss
index bd1c05bb..1172df3a 100644
--- a/src/components/organisms/Modal/Modal.scss
+++ b/src/components/organisms/Modal/Modal.scss
@@ -57,7 +57,7 @@
     background-color: $white;
 
     &-container {
-      margin-right: rem($base-size + math.div($gutter-size, 2));
+      margin-right: rem($base-size + calc($gutter-size, 2));
     }
 
     &--close {
diff --git a/src/components/organisms/Sidebar/Sidebar.scss b/src/components/organisms/Sidebar/Sidebar.scss
index 4055b381..59d93e1d 100644
--- a/src/components/organisms/Sidebar/Sidebar.scss
+++ b/src/components/organisms/Sidebar/Sidebar.scss
@@ -74,7 +74,7 @@
     }
 
     .ebs-sidebar__suffix .ebs-icon {
-      right: rem(math.div($gutter-size, 2));
+      right: rem(calc($gutter-size / 2));
     }
 
     .ebs-sidebar__options {
diff --git a/src/components/organisms/Table/Table.scss b/src/components/organisms/Table/Table.scss
index 02dc40fe..ae65a5bb 100644
--- a/src/components/organisms/Table/Table.scss
+++ b/src/components/organisms/Table/Table.scss
@@ -112,7 +112,7 @@
       }
 
       &-title {
-        padding: rem($gutter-size $gutter-size math.div($gutter-size, 2));
+        padding: rem($gutter-size $gutter-size calc($gutter-size / 2));
         font-size: rem($table-body-font-size);
         width: 100%;
       }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 7cfe6cb2..bb44bbbd 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -306,7 +306,7 @@ $label-padding: 0 12px !default;
 $label-color: $text-color !default;
 $label-border: 1px solid !default;
 $label-border-radius: $border-radius !default;
-$label-circle-border-radius: math.div($label-height, 2) !default;
+$label-circle-border-radius: calc($label-height / 2) !default;
 
 // Sidebar
 //
@@ -357,7 +357,7 @@ $sort-by-text-hover-color: $white !default;
 // Scrollbar
 //
 // Define base size & colors of scrollbar
-$scrollbar-size: math.div($gutter-size, 2) !default;
+$scrollbar-size: calc($gutter-size / 2) !default;
 $scrollbar-track-background-color: $background-content !default;
 $scrollbar-thumb-background-color: $border-color !default;
 $scrollbar-thumb-hover-background-color: var(--primary-color) !default;