From 22cff2990d877e6745d680a7093df29b3449d134 Mon Sep 17 00:00:00 2001
From: Ruben <15885455+RubenNL@users.noreply.github.com>
Date: Mon, 24 May 2021 11:08:50 +0200
Subject: [PATCH] fixes #13694

---
 .../src/components/VColorPicker/_variables.scss    |  4 +++-
 .../vuetify/src/styles/settings/_variables.scss    | 14 ++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/vuetify/src/components/VColorPicker/_variables.scss b/packages/vuetify/src/components/VColorPicker/_variables.scss
index 29a3daea13b0..26b2229967a7 100644
--- a/packages/vuetify/src/components/VColorPicker/_variables.scss
+++ b/packages/vuetify/src/components/VColorPicker/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import '../../styles/styles.sass';
 
 $color-picker-border-radius: $border-radius-root !default;
@@ -18,7 +20,7 @@ $color-picker-input-font-size: 0.75rem !default;
 $color-picker-input-margin: 8px !default;
 $color-picker-input-margin-bottom: 8px !default;
 $color-picker-slider-height: 10px !default;
-$color-picker-slider-border-radius: $color-picker-slider-height / 2 !default;
+$color-picker-slider-border-radius: math.div($color-picker-slider-height, 2) !default;
 $color-picker-preview-dot-size: 30px !default;
 $color-picker-preview-dot-margin: 24px !default;
 $color-picker-hue-margin-bottom: 24px !default;
diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
index f5cc26be86ef..3f988a1c7f1c 100644
--- a/packages/vuetify/src/styles/settings/_variables.scss
+++ b/packages/vuetify/src/styles/settings/_variables.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import '../tools/_functions.sass';
 
 $color-pack: true !default;
@@ -11,7 +13,7 @@ $rounded: () !default;
 $rounded: map-deep-merge(
   (
     0: 0,
-    'sm': $border-radius-root / 2,
+    'sm': math.div($border-radius-root, 2),
     null: $border-radius-root,
     'lg': $border-radius-root * 2,
     'xl': $border-radius-root * 6,
@@ -53,15 +55,15 @@ $grid-gutter: $spacer * 6 !default;
 $form-grid-gutter: $spacer * 2 !default;
 $grid-columns: 12 !default;
 
-$container-padding-x: $grid-gutter / 2 !default;
+$container-padding-x: math.div($grid-gutter, 2) !default;
 
 $grid-gutters: () !default;
 $grid-gutters: map-deep-merge(
   (
-    'xs': $grid-gutter / 12,
-    'sm': $grid-gutter / 6,
-    'md': $grid-gutter / 3,
-    'lg': $grid-gutter * 2/3,
+    'xs': math.div($grid-gutter, 12),
+    'sm': math.div($grid-gutter, 6),
+    'md': math.div($grid-gutter, 3),
+    'lg': math.div($grid-gutter * 2, 3),
     'xl': $grid-gutter
   ),
   $grid-gutters