Combine CSS for trimmer and selector into single file

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

-@import "../../css/colors.css";
-
-$border-radius: 4px;
-$trim-handle-width: 12px;
-$trim-handle-height: 14px;
-$stripe-size: 10px;
-$hover-scale: 2;
-
-.absolute {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-
-    /* Force the browser to paint separately to avoid composite cost with waveform */
-    transform: translateZ(0);
-}
-
-.trim-background {
-    cursor: pointer;
-    touch-action: none;
-}
-
-.trim-background-mask {
-    border: 1px solid $motion-tertiary;
-    opacity: 0.5;
-    background: $motion-primary;
-}
-
-.start-trim-background .trim-background-mask {
-    border-top-left-radius: $border-radius;
-    border-bottom-left-radius: $border-radius;
-}
-
-.end-trim-background .trim-background-mask {
-    border-top-right-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-}
-
-.trim-line {
-    position: absolute;
-    top: 0;
-    width: 0px;
-    height: 100%;
-    border: 1px solid $motion-tertiary;
-}
-
-.playhead-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
-
-.playhead {
-    /*
-        Even though playhead is just a line, it is 100% width (the width of the waveform)
-        so that we can use transform: translateX() using percentages.
-    */
-    width: 100%;
-    border-left: 1px solid $motion-primary;
-    border-top: none;
-    border-bottom: none;
-    border-right: none;
-}
-
-.start-trim-line {
-    left: 0;
-}
-
-.end-trim-line {
-    right: 0;
-}
-
-.trim-handle {
-    position: absolute;
-    left: calc(-$trim-handle-width / 2);
-    width: $trim-handle-width;
-    height: $trim-handle-height;
-    filter: hue-rotate(180deg);
-}
-
-.trim-handle img {
-    position: absolute;
-    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 */
-
-    transition: 0.2s;
-}
-
-.top-trim-handle {
-    top: -$trim-handle-height;
-}
-
-.bottom-trim-handle {
-    bottom: -$trim-handle-height;
-}
-
-.top-trim-handle img {
-    transform: rotate(180deg);
-}
-
-/* Increase handle size when anywhere on draggable area is hovered */
-.trim-background:hover img {
-    transform: scale($hover-scale);
-}
-
-.trim-background:hover .top-trim-handle img {
-    transform: rotate(180deg) scale($hover-scale);
-}

src/components/audio-trimmer/audio-selector.jsx

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import Box from '../box/box.jsx';
-import styles from './audio-selector.css';
+import styles from './audio-trimmer.css';
 import handleIcon from './icon--handle.svg';
 
 const AudioSelector = props => (
     <div
-        className={styles.absolute}
+        className={classNames(styles.absolute, styles.selector)}
         ref={props.containerRef}
         onMouseDown={props.onNewSelectionMouseDown}
         onTouchStart={props.onNewSelectionMouseDown}
@@ -20,9 +20,9 @@ const AudioSelector = props => (
                     width: `${100 * (props.trimEnd - props.trimStart)}%`
                 }}
             >
-                <Box className={classNames(styles.absolute, styles.trimBackgroundMask)} />
+                <Box className={classNames(styles.absolute, styles.selectionBackground)} />
                 <Box
-                    className={classNames(styles.trimLine, styles.startTrimLine)}
+                    className={classNames(styles.trimLine, styles.startSelectionLine)}
                     onMouseDown={props.onTrimStartMouseDown}
                     onTouchStart={props.onTrimStartMouseDown}
                 >
@@ -34,7 +34,7 @@ const AudioSelector = props => (
                     </Box>
                 </Box>
                 <Box
-                    className={classNames(styles.trimLine, styles.endTrimLine)}
+                    className={classNames(styles.trimLine, styles.endSelectionLine)}
                     onMouseDown={props.onTrimEndMouseDown}
                     onTouchStart={props.onTrimEndMouseDown}
                 >

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

@@ -17,6 +17,10 @@ $hover-scale: 2;
     transform: translateZ(0);
 }
 
+.selector {
+    cursor: pointer;
+}
+
 .trim-background {
     cursor: pointer;
     touch-action: none;
@@ -35,6 +39,12 @@ $hover-scale: 2;
     );
 }
 
+.selection-background {
+    border: 1px solid $motion-tertiary;
+    background: $motion-primary;
+    opacity: 0.5;
+}
+
 .start-trim-background .trim-background-mask {
     border-top-left-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
@@ -53,6 +63,10 @@ $hover-scale: 2;
     border: 1px solid $red-tertiary;
 }
 
+.selector .trim-line {
+    border: 1px solid $motion-tertiary;
+}
+
 .playhead-container {
     position: absolute;
     top: 0;
@@ -78,10 +92,18 @@ $hover-scale: 2;
     right: 0;
 }
 
+.start-selection-line {
+    left: 0;
+}
+
 .end-trim-line {
     left: 0;
 }
 
+.end-selection-line {
+    right: 0;
+}
+
 .trim-handle {
     position: absolute;
     left: calc(-$trim-handle-width / 2);
@@ -89,6 +111,10 @@ $hover-scale: 2;
     height: $trim-handle-height;
 }
 
+.selector .trim-handle {
+    filter: hue-rotate(180deg);
+}
+
 .trim-handle img {
     position: absolute;
     width: $trim-handle-width;