Fixed some style errors

src/sass/mup.sass

@@ -1,10 +1,15 @@
 //# general variables
-$main-color: red
-$text-color: white
+$main-color: #f00
+$background-color-dark: #212121
+$control-background-light: #eee
+$control-border: #212121
+$shadow-color: #000
+$text-color-dark: #212121
+$text-color-white: #fff
 //# slider variables
-$slider-track-color: grey
-$slider-progress-color: red
-$slider-thumb-color: red
+$slider-track-color: #808080
+$slider-progress-color: $main-color
+$slider-thumb-color: $main-color
 $slider-thumb-height: calc(100% + 8px)
 $slider-thumb-width: 15px
 $slider-thumb-border-radius: 15px
@@ -23,12 +28,12 @@ $slider-thumb-border-radius: 15px
   vertical-align: top
   white-space: nowrap
   padding: 5px
-  background: #212121
+  background: $background-color-dark
   overflow: auto
 
   input:focus
     outline: none
-  
+
   button::-moz-focus-inner
     border: none
 
@@ -44,7 +49,7 @@ $slider-thumb-border-radius: 15px
 
   .mup-control
     display: inline-block
-    color: $text-color
+    color: $text-color-white
     &:not(:last-child)
       margin-right: 10px
 
@@ -71,15 +76,15 @@ $slider-thumb-border-radius: 15px
   button.mup-control
     margin: 0
     padding: 7px 12px
-    background: #eee
+    background: $control-background-light
     border: none
-    color: #000
+    color: $text-color-dark
     font-size: 16px
     font-weight: bold
     transition: all 200ms ease-in-out
     &:hover
-      background: #fff
-      color: #212121
+      background: lighten($control-background-light, 10%)
+      color: $text-color-dark
       cursor: pointer
   
   .mup-volume-slider
@@ -90,20 +95,20 @@ $slider-thumb-border-radius: 15px
     padding: 0
     background: none
     border: none
-
+    //# Chromium-based and Safari browser styles
     &::-webkit-slider-runnable-track
       width: 100%
       height: 10px
       cursor: pointer
       animate: 0.2s
-      box-shadow: 0 0 0 #000000, 0 0 0 #0d0d0d
+      box-shadow: 0 0 0 $shadow-color, 0 0 0 $shadow-color
       background: $slider-track-color
       border-radius: 25px
-      border: 0px solid #000101
+      border: 0px solid $control-border
       overflow: hidden
     &::-webkit-slider-thumb
       box-shadow: -100px 0 0 90px $main-color
-      border: 0px solid #000000
+      border: 0px solid $shadow-color
       width: $slider-thumb-width
       height: $slider-thumb-height
       border-radius: $slider-thumb-border-radius
@@ -113,29 +118,29 @@ $slider-thumb-border-radius: 15px
       margin-top: -2.4px
     &:focus::-webkit-slider-runnable-track
       background: $slider-track-color
-    
+    //# Mozilla browser styles for range
     &::-moz-range-track
       width: 100%
       height: 10px
       cursor: pointer
       animate: 0.2s
-      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
+      box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
       background: $slider-track-color
       border-radius: 25px
-      border: 0px solid #000101
+      border: 0px solid $control-border
     &::-moz-range-progress
       height: 100%
       background: $main-color
       border-radius: $slider-thumb-border-radius
     &::-moz-range-thumb
-      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
-      border: 0px solid #000000
+      box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
+      border: 0px solid $control-border
       width: $slider-thumb-width
       height: $slider-thumb-height
       border-radius: $slider-thumb-border-radius
       background: $main-color
       cursor: pointer
-    
+    //# Microsoft browser styles for range
     &::-ms-track
       width: 100%
       height: 10px
@@ -145,17 +150,17 @@ $slider-thumb-border-radius: 15px
       border-color: transparent
       border-width: 39px 0
       color: transparent
-    &::-ms-fill-lower, 
+    &::-ms-fill-lower,
     &::-ms-fill-upper
       background: $slider-track-color
-      border: 0px solid #000101
+      border: 0px solid $control-border
       border-radius: 50px
-      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
+      box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
     &::-ms-fill-lower
       background: $slider-thumb-color
     &::-ms-thumb
-      box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d
-      border: 0px solid #000000
+      box-shadow: 0px 0px 0px $shadow-color, 0px 0px 0px $shadow-color
+      border: 0px solid $control-border
       width: $slider-thumb-width
       height: $slider-thumb-height
       border-radius: $slider-thumb-border-radius
@@ -163,4 +168,4 @@ $slider-thumb-border-radius: 15px
       cursor: pointer
     &:focus
       &::-ms-fill-lower, &::-ms-fill-upper
-        background: #ac51b5
+        background: $main-color