chore(FEC-12489): Remove use of node-sass

Remove use of node-sass and replace with sass to avoid node version
errors.
Refactor sass files to fix build warnings.

package.json

@@ -113,9 +113,9 @@
     "lint-staged": "^10.2.11",
     "mocha": "^8.0.1",
     "mocha-cli": "^1.0.1",
-    "node-sass": "^4.14.1",
     "prettier": "^2.0.5",
     "rimraf": "^3.0.2",
+    "sass": "^1.58.0",
     "sass-loader": "^9.0.2",
     "sinon": "^9.0.2",
     "sinon-chai": "^3.5.0",

src/components/icon/icon.scss

@@ -4,7 +4,7 @@
   $encoded: '';
   $slice: 2000;
   $index: 0;
-  $loops: ceil(str-length($svg) / $slice);
+  $loops: ceil(calc(str-length($svg) / $slice));
 
   @for $i from 1 through $loops {
     $chunk: str-slice($svg, $index, $index + $slice - 1);

src/components/seekbar/_seekbar.scss

@@ -76,7 +76,7 @@
       position: absolute;
       cursor: pointer;
       display: block;
-      top: -8px + $progress-bar-height / 2;
+      top: -8px + calc($progress-bar-height / 2);
       right: -8px;
       border-radius: 8px;
       height: 16px;
@@ -135,7 +135,7 @@
     .progress-bar {
       height: 2 * $progress-bar-height;
       border-radius: 2 * $progress-bar-border-radius;
-      transform: translateY(-$progress-bar-height / 2);
+      transform: translateY(calc($progress-bar-height / -2));
 
       .scrubber {
         top: -8px + $progress-bar-height;

src/styles/_variables.scss

@@ -9,7 +9,7 @@ $tooltip-semi-side-margin: 16px;
 $tooltip-semi-side-arrow-margin: 11px;
 $font-family: Lato, Helvetica Neue, Segoe UI, sans-serif;
 $progress-bar-height: 4px;
-$progress-bar-border-radius: $progress-bar-height / 2;
+$progress-bar-border-radius: calc($progress-bar-height / 2);
 $spinner-circle-radius: 4px;
 $spinner-colors: rgb(218, 31, 38), rgb(6, 168, 133), rgb(0, 147, 68), rgb(248, 166, 26), rgb(27, 74, 151), rgb(0, 171, 204), rgb(177, 210, 56),
 rgb(252, 210, 3);