Replace deprecated sass division operator

https://sass-lang.com/documentation/breaking-changes/slash-div
> Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.

There's a handy migrator:

    npm install -g sass-migrator
    sass-migrator division **/*.scss

And it cleverly avoids the need for the ugly division method in most cases.

app/webpacker/css/admin/components/states.scss

@@ -8,7 +8,7 @@
     position: relative;
     display: inline-block;
     margin-right: 3px;
-    border-radius: $body-font-size/2;
+    border-radius: $body-font-size*0.5;
     width: $body-font-size - 4px;
     height: $body-font-size - 4px;
   }

app/webpacker/css/admin/grid.scss

@@ -1,11 +1,13 @@
 // Grid Calculations
 // Adjust $col-gutter (space between columns, as percentage) to adjust everything else automatically
 
+@use "sass:math";
+
 $col-gutter: 2;
 $total-gutter: $col-gutter * 15;
 $total-colspace: 100 - $total-gutter;
-$gutter-width: $col-gutter / 100;
-$col-width: ($total-colspace / 16) / 100;
+$gutter-width: $col-gutter * 0.01;
+$col-width: math.div($total-colspace, 16) * 0.01;
 
 $col-1: $col-width;
 $col-2: ($col-width * 2) + $gutter-width;

app/webpacker/css/darkswarm/menu.scss

@@ -281,7 +281,7 @@ nav.top-bar {
   nav .top-bar-section {
     ul li a,
     .has-dropdown > a {
-      padding: 0 ($topbar-height / 8) !important;
+      padding: 0 ($topbar-height * 0.125) !important;
     }
   }
 }

app/webpacker/css/darkswarm/variables.scss

@@ -13,7 +13,7 @@ $brand-colour: #f27052;
 
 // Topbar
 $topbar-height: rem-calc(64);
-$topbar-link-padding: $topbar-height / 4;
+$topbar-link-padding: $topbar-height * 0.25;
 $topbar-arrows: false;
 
 $topbar-bg: $white;