fix: use multiplications directly instead of math.div, quiet deprecation warnings

Author: ColinFrick

scripts/build-css

@@ -14,7 +14,7 @@ mkdir -p "$DIST_DIR"
 
 # ./dist/cdn/docs-searchbar.css
 echo "$LICENSE" > "$DIST_FILE";
-sass --style expanded ./src/styles/main.scss \
+sass --style expanded --quiet-deps ./src/styles/main.scss \
   | postcss --use autoprefixer -o "$DIST_FILE"
 
 # copy styles

src/styles/_dropdown.scss

@@ -1,6 +1,4 @@
 // Detect lightness
-@use "sass:math";
-
 @function detectLightness($color) {
   @if (lightness($color) > 60) {
     @return mix($color, #000, 90%);
@@ -264,7 +262,7 @@
         display: block;
         width: 70%;
         position: relative;
-        padding: math.div($padding, 3) 0 math.div($padding, 3) math.div($padding, 1.5);
+        padding: $padding*0.3333333333 0 $padding*0.3333333333 $padding*0.6666666667;
         cursor: pointer;
 
         &:before {
@@ -304,7 +302,7 @@
         padding-left: 0;
         text-align: right;
         position: relative;
-        padding: math.div($padding, 3) math.div($padding, 1.5);
+        padding: $padding*0.3333333333 $padding*0.6666666667;
         color: $subtitle-color;
         font-size: $subtitle-size;
         word-wrap: break-word;
@@ -500,7 +498,7 @@
           margin: $padding*0.25 0 0;
           display: desc($include-desc);
           line-height: 1.4em;
-          padding: math.div($padding, 3) $padding*0.5;
+          padding: $padding*0.3333333333 $padding*0.5;
           background: $suggestion-background-color;
           font-size: $text-size;
           opacity: 0.8;
@@ -522,7 +520,7 @@
       width: 180px;
       height: 20px;
       z-index: 2000;
-      margin-top: math.div($padding, 1.5);
+      margin-top: $padding*0.6666666667;
       color: $text-color;
       margin-left: auto;
     }

src/styles/_searchbox.scss

@@ -1,15 +1,13 @@
-@use "sass:math";
-
 @function even-px($value) {
   @if type-of($value) == 'number' {
     @if (unitless($value)) {
       $value: $value * 1px;
     } @else if unit($value) == 'em' {
-      $value: (math.div($value, 1em) * 16px);
+      $value: ($value / 1em * 16px);
     } @else if unit($value) == 'pts' {
       $value: $value * 1.3333 * 1px;
     } @else if unit($value) == '%' {
-      $value: math.div($value * 16, 100%) * 1px;
+      $value: $value * 16 / 100% * 1px;
     }
     $value: round($value);
     @if ($value % 2 != 0px) {
@@ -32,13 +30,13 @@
   $input-focus-background: #fff,
   $placeholder-color: #aaa,
   $icon: 'sbx-icon-search-1',
-  $icon-size: math.div($input-height, 1.6),
+  $icon-size: $input-height*0.625,
   $icon-position: left,
   $icon-color: #888,
   $icon-background: $input-focus-border-color,
   $icon-background-opacity: 0.1,
   $icon-clear: 'sbx-icon-clear-1',
-  $icon-clear-size: math.div($font-size, 1.1),
+  $icon-clear-size: $font-size*0.91,
   $dark-mode: false
 ) {
   .searchbox {