Replace deprecated sass div /

https://sass-lang.com/documentation/breaking-changes/slash-div

frontend/src/global_styles/content/_tooltips.sass

@@ -30,6 +30,8 @@
 
 // tooltips used for arbitrary elements
 
+@use "sass:math"
+
 $tooltip--background-color: #e3f5ff
 $tooltip--border: none
 $tooltip--height: 22px
@@ -56,7 +58,7 @@ $advanced-tooltip--border: 1px solid #a7cbe1
   &:before
     margin-bottom: $tooltip--arrow-size * -1 + 1
   &:after
-    margin-bottom: $tooltip--height/-1.5
+    margin-bottom: math.div($tooltip--height, -1.5)
 
   &.-multiline
     &:before, &:after
@@ -86,9 +88,9 @@ $advanced-tooltip--border: 1px solid #a7cbe1
 
 %tooltip--after
   height: $tooltip--height
-  padding: $tooltip--height/2 $tooltip--height/2 0 $tooltip--height/2
+  padding: $tooltip--height*0.5 $tooltip--height*0.5 0 $tooltip--height*0.5
   font-size: 13px
-  line-height: $tooltip--height/2
+  line-height: $tooltip--height*0.5
   white-space: nowrap
   content: attr(data-tooltip)
   border: $tooltip--border
@@ -125,7 +127,7 @@ $advanced-tooltip--border: 1px solid #a7cbe1
     &:after
       height: auto
       width: 150px
-      padding: $tooltip--height/2
+      padding: $tooltip--height*0.5
       line-height: $tooltip--height - 3px
       white-space: normal
       text-align: left

frontend/src/global_styles/vendor/foundation-apps/scss/components/_block-list.scss

@@ -224,7 +224,7 @@ $blocklist-check-icons: true !default;
     + get-side($blocklist-item-padding, top);
 
   $icon-height: $item-height * $blocklist-item-icon-size;
-  $icon-offset: ($item-height - $icon-height) / 2;
+  $icon-offset: ($item-height - $icon-height) * 0.5;
 
   #{$item-selector} {
     > a, > span, > label {

frontend/src/global_styles/vendor/foundation-apps/scss/components/_forms.scss

@@ -265,7 +265,7 @@ select {
 // Range slider
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 input[type="range"] {
-  $margin: ($slider-thumb-height - $slider-height) / 2;
+  $margin: ($slider-thumb-height - $slider-height) * 0.5;
 
   @include no-appearance;
   display: block;

frontend/src/global_styles/vendor/foundation-apps/scss/components/_grid.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "panel";
 
 /*
@@ -38,7 +40,7 @@ $block-grid-max-size: 6 !default;
 */
 @mixin grid-size($size: expand) {
   @if (type-of($size) == 'number') {
-    $pct: percentage($size / $total-columns);
+    $pct: percentage(math.div($size, $total-columns));
     flex: 0 0 $pct;
     // max-width prevents columns from wrapping early in IE10/11
     max-width: $pct;
@@ -188,7 +190,7 @@ $block-grid-max-size: 6 !default;
 */
 @mixin grid-offset($offset: false) {
   @if ($offset != false) {
-    margin-left: percentage($offset / $total-columns);
+    margin-left: percentage(math.div($offset, $total-columns));
   }
 }
 
@@ -276,7 +278,7 @@ $block-grid-max-size: 6 !default;
 
   > li, > div, > section {
     padding: 0 1rem 1rem;
-    flex: 0 0 percentage(1 / $up);
+    flex: 0 0 percentage(math.div(1, $up));
   }
 }
 

frontend/src/global_styles/vendor/foundation-apps/scss/components/_label.scss

@@ -4,8 +4,10 @@
 
 /// @Foundation.settings
 // Label
+@use "sass:math";
+
 $label-fontsize: 0.8rem !default;
-$label-padding: ($global-padding / 3) ($global-padding / 2) !default;
+$label-padding: math.div($global-padding, 3) ($global-padding * 0.5) !default;
 $label-radius: 0 !default;
 $label-background: $primary-color !default;
 $label-color: isitlight($primary-color) !default;

frontend/src/global_styles/vendor/foundation-apps/scss/components/_notification.scss

@@ -76,7 +76,7 @@ $notification-icon-align: top !default;
   }
   @else if $x == middle {
     left: 50%;
-    margin-left: -($size / 2);
+    margin-left: -($size * 0.5);
   }
 
   @if $y == top {

frontend/src/global_styles/vendor/foundation-apps/scss/components/_title-bar.scss

@@ -13,7 +13,7 @@
 /// @Foundation.settings
 // Title Bar
 $titlebar-center-width: 50% !default;
-$titlebar-side-width: (100% - $titlebar-center-width) / 2 !default;
+$titlebar-side-width: (100% - $titlebar-center-width) * 0.5 !default;
 $titlebar-background: #eee !default;
 $titlebar-color: #000 !default;
 $titlebar-border: 1px solid #ccc !default;

frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_breakpoints.scss

@@ -15,6 +15,8 @@
 /// @Foundation.settings
 // Breakpoints
 // These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
+@use "sass:math";
+
 $breakpoints: (
   small: rem-calc(0),
   medium: rem-calc(640),
@@ -66,7 +68,7 @@ $breakpoint-classes: (small medium large) !default;
             $bpMax: null;
           }
           @else {
-            $bpMax: $next-bp - (1/16);
+            $bpMax: $next-bp - math.div(1, 16);
           }
         }
         $bp: map-get($breakpoints, $bp);
@@ -99,7 +101,7 @@ $breakpoint-classes: (small medium large) !default;
         }
       }
       @else if $dir == 'down' {
-        $max: $bp - (1/16);
+        $max: $bp - math.div(1, 16);
         $str: $str + ' and (max-width: #{$max})';
       }
       @else {

frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_functions.scss

@@ -3,6 +3,8 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
+@use "sass:math";
+
 $include-css: () !default;
 $modules: () !default;
 $rem-base: 16px !default;
@@ -296,7 +298,7 @@ $rem-base: 16px !default;
 ///
 /// @return The same number, sans unit.
 @function strip-unit($num) {
-  @return $num / ($num * 0 + 1);
+  @return math.div($num, $num * 0 + 1);
 }
 
 /// Turn to Degrees
@@ -316,7 +318,7 @@ $rem-base: 16px !default;
 ///
 /// @return A number in rems, calculated based on the given value and the base pixel value.
 @function convert-to-rem($value, $base-value: $rem-base)  {
-  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
+  $value: math.div(strip-unit($value), strip-unit($base-value)) * 1rem;
   @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
   @return $value;
 }

frontend/src/global_styles/vendor/foundation-apps/scss/helpers/_mixins.scss

@@ -60,18 +60,18 @@
       }
       @else {
         top: 50%;
-        margin-top: -$width/2;
+        margin-top: -$width*0.5;
       }
       @if $left {
         left: $left;
       }
       @else {
-        left: ($tabbar-menu-icon-width - $width)/2;
+        left: ($tabbar-menu-icon-width - $width)*0.5;
       }
     }
     @else {
       top: 50%;
-      margin-top: -$width/2;
+      margin-top: -$width*0.5;
       #{$opposite-direction}: $topbar-link-padding;
     }