More CSS refactor

src/components/audio-trimmer/audio-trimmer.css

@@ -3,13 +3,14 @@
 $border-radius: 4px;
 $trim-handle-width: 12px;
 $trim-handle-height: 14px;
+$stripe-size: 10px;
 $hover-scale: 2;
 
 .absolute {
     position: absolute;
-    width: 100%;
     top: 0;
     left: 0;
+    width: 100%;
     height: 100%;
 }
 
@@ -18,16 +19,15 @@ $hover-scale: 2;
 }
 
 .trim-background-mask {
-    background: $red-primary;
     border: 1px solid $red-tertiary;
     opacity: 0.5;
 
     background: repeating-linear-gradient(
         45deg,
         $red-primary,
-        $red-primary 10px,
-        $red-tertiary 10px,
-        $red-tertiary 20px
+        $red-primary $stripe-size,
+        $red-tertiary $stripe-size,
+        $red-tertiary calc(2 * $stripe-size)
     );
 }
 
@@ -43,10 +43,10 @@ $hover-scale: 2;
 
 .trim-line {
     position: absolute;
+    top: 0;
     width: 0px;
     height: 100%;
     border: 1px solid $red-tertiary;
-    top: 0;
 }
 
 .playhead {
@@ -62,11 +62,10 @@ $hover-scale: 2;
 }
 
 .trim-handle {
-    width: $trim-handle-width;
-    height: $trim-handle-height;
-
     position: absolute;
     left: calc(-$trim-handle-width / 2);
+    width: $trim-handle-width;
+    height: $trim-handle-height;
 }
 
 .trim-handle img {
@@ -74,6 +73,7 @@ $hover-scale: 2;
     width: $trim-handle-width;
     height: $trim-handle-height;
 
+    /* Make sure image dragging isn't triggered */
     user-select: none;
     user-drag: none;
     -webkit-user-drag: none; /* Autoprefixer doesn't seem to work for this */