Remove deprecation warnings

1. As of Dart Sass 2.0.0, !global assignments won't be able to declare new variables.

   Since this assignment is at the root of the stylesheet, the !global flag is
 unnecessary and can safely be removed.

2. Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

   Recommendation: math.div($spacing, 2)

assets/styles/base/_functions.scss

@@ -1,7 +1,9 @@
 ///Computes the "brightness" of a color
+@use "sass:math";
+
 @function brightness($color) {
   @if type-of($color) == color {
-    @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
+    @return math.div(red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114, 255) * 100%;
   }
   @else {
     @return unquote("brightness(#{$color})");
@@ -70,11 +72,11 @@
       $n: $n * 10;
   }
   @if $mode == round {
-      @return round($number * $n) / $n;
+      @return math.div(round($number * $n), $n);
   } @else if $mode == ceil {
-      @return ceil($number * $n) / $n;
+      @return math.div(ceil($number * $n), $n);
   } @else if $mode == floor {
-      @return floor($number * $n) / $n;
+      @return math.div(floor($number * $n), $n);
   } @else {
       @warn '#{ $mode } is undefined keyword.';
       @return $number;

assets/styles/fonts/_icons.scss

@@ -1,6 +1,8 @@
 
-$icomoon-font-path: '~assets/fonts/icons/fonts' !global;
-$icomoon-font-family: 'icons' !global;
+@use "sass:math";
+
+$icomoon-font-path: '~assets/fonts/icons/fonts';
+$icomoon-font-family: 'icons';
 
 @import "~assets/fonts/icons/style.scss";
 
@@ -30,7 +32,7 @@ $icomoon-font-family: 'icons' !global;
 }
 
 // FontAwesomness
-$icon-li-width:         (30em / 14) !default;
+$icon-li-width:         math.div(30em, 14) !default;
 $icon-inverse:          #fff !default;
 
 .icon {
@@ -39,7 +41,7 @@ $icon-inverse:          #fff !default;
 
 // Sizes
 .icon-fw {
-  width: (18em/14);
+  width: math.div(18em, 14);
   text-align: center;
 }
 
@@ -48,8 +50,8 @@ $icon-inverse:          #fff !default;
 }
 
 .icon-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
+  font-size: math.div(4em, 3);
+  line-height: (3em * 0.25);
   vertical-align: -15%;
 }
 .icon-2x { font-size: 2em; }
@@ -88,10 +90,10 @@ $icon-inverse:          #fff !default;
   position: absolute;
   left: -$icon-li-width;
   width: $icon-li-width;
-  top: (2em / 14);
+  top: math.div(2em, 14);
   text-align: center;
   &.icon-lg {
-    left: -$icon-li-width + (4em / 14);
+    left: -$icon-li-width + math.div(4em, 14);
   }
 }
 

assets/styles/global/_columns.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "~assets/styles/base/functions";
 @import "~assets/styles/base/_variables";
 
@@ -53,18 +55,18 @@ $DEFAULT_COLUMNS: 12;
 
   @while $span > 0 {
     // Normal column with a gutter
-    .span-#{$span}#{$suffix} { width: decimal-round( (((100 - ($column-gutter * ($cols - 1))) / $cols) * $span) + (($span - 1) * $column-gutter) , 3, 'floor'); }
+    .span-#{$span}#{$suffix} { width: decimal-round( (math.div(100 - ($column-gutter * ($cols - 1)), $cols) * $span) + (($span - 1) * $column-gutter) , 3, 'floor'); }
 
     // Gutterless column
-    .gutless .span-#{$span}#{$suffix} { margin-right: 0; width: decimal-round( $span / $cols * 100%, 3, 'floor'); }
+    .gutless .span-#{$span}#{$suffix} { margin-right: 0; width: decimal-round( math.div($span, $cols) * 100%, 3, 'floor'); }
 
     // Offsets
     .offset-#{$span}#{$suffix} {
-      margin-left: decimal-round( ($span/$cols*100%) + $span*($column-gutter/$cols), 3, 'floor' );
+      margin-left: decimal-round( (math.div($span, $cols)*100%) + $span*math.div($column-gutter, $cols), 3, 'floor' );
     }
 
     // Gutterless offset
-    .gutless .offset-#{$span}#{$suffix} { margin-left: decimal-round( ($span/$cols*100%), 3, 'floor' ); }
+    .gutless .offset-#{$span}#{$suffix} { margin-left: decimal-round( (math.div($span, $cols)*100%), 3, 'floor' ); }
 
     $span: $span - 1;
   }

components/BannerGraphic.vue

@@ -97,7 +97,7 @@ export default {
       .graphic {
         height: $banner-height-small;
         img.banner {
-          margin-top: ($banner-height-small - $banner-height)/2;
+          margin-top: math.div(($banner-height-small - $banner-height), 2);
         }
       }
     }

components/CountBox.vue

@@ -70,7 +70,7 @@ export default {
       h1 {
         font-size: 40px;
         line-height: 36px;
-        padding-bottom: $padding / 2;
+        padding-bottom: math.div($padding, 2);
         margin-bottom: 5px;
       }
 

components/CountGauge.vue

@@ -128,7 +128,7 @@ export default {
         h1 {
           font-size: 40px;
           line-height: 36px;
-          padding-bottom: $padding / 2;
+          padding-bottom: math.div($padding, 2);
           margin-bottom: 0;
         }
 
@@ -142,7 +142,7 @@ export default {
         .alerts {
             position: absolute;
             right: $padding;
-            top: $padding / 2;
+            top: math.div($padding, 2);
             font-size: 15px;
 
             .text-error {

components/DetailTop.vue

@@ -165,7 +165,7 @@ export default {
       flex-direction: row;
       flex-wrap: wrap;
       position: relative;
-      top: $spacing * -1/2;
+      top: $spacing * math.div(-1, 2);
 
       .label {
         position: relative;
@@ -173,7 +173,7 @@ export default {
       }
 
       .tag {
-        margin: $spacing/2 $spacing 0 $spacing/2;
+        margin: math.div($spacing, 2) $spacing 0 math.div($spacing, 2);
         font-size: 12px;
       }
     }

components/SelectIconGrid.vue

@@ -200,7 +200,7 @@ export default {
         text-align: center;
         position: absolute;
         left: $side+$margin;
-        top: ($height - $logo)/2;
+        top: math.div(($height - $logo), 2);
         width: $logo;
         height: $logo;
         border-radius: calc(2 * var(--border-radius));

components/auth/Principal.vue

@@ -117,7 +117,7 @@ export default {
       "avatar name"
       "avatar description";
     grid-template-columns: $size auto;
-    grid-template-rows: $size/2 $size/2;
+    grid-template-rows: math.div($size, 2) math.div($size, 2);
     column-gap: 10px;
 
     &.showLabels {
@@ -156,12 +156,12 @@ export default {
 
     .name {
       grid-area: name;
-      line-height: $size/2;
+      line-height: math.div($size, 2);
     }
 
     .description {
       grid-area: description;
-      line-height: $size/2;
+      line-height: math.div($size, 2);
     }
   }
 </style>

components/graph/Bar.vue

@@ -40,7 +40,7 @@ export default {
 
     width: 100%;
     height: $height;
-    border-radius: $height / 2;
+    border-radius: math.div($height, 2);
     overflow: hidden;
 
     .indicator {