ref(filmstrip): move toolbar css to own file

css/_filmstrip.scss

@@ -18,38 +18,6 @@
         bottom: $newToolbarSizeWithPadding;
     }
 
-    &__toolbar {
-        @include flex();
-        flex-direction: column-reverse;
-        flex-wrap: nowrap;
-        position: relative;
-        width: $filmstripToggleButtonWidth;
-
-        button {
-            font-size: 14px;
-            line-height: 1.2;
-            text-align: center;
-            background: transparent;
-            opacity: 0.7;
-            height: auto;
-            width: 100%;
-            padding: 0;
-            margin: 0;
-            border: none;
-            outline: none;
-
-            -webkit-appearance: none;
-
-            &:hover {
-                opacity: 1;
-            }
-
-            i {
-                cursor: pointer;
-            }
-        }
-    }
-
     &__videos {
         @extend %align-right;
         position:relative;

css/filmstrip/_filmstrip_toolbar.scss

@@ -0,0 +1,31 @@
+.filmstrip__toolbar {
+    @include flex();
+    flex-direction: column-reverse;
+    flex-wrap: nowrap;
+    position: relative;
+    width: $filmstripToggleButtonWidth;
+
+    button {
+        font-size: 14px;
+        line-height: 1.2;
+        text-align: center;
+        background: transparent;
+        opacity: 0.7;
+        height: auto;
+        width: 100%;
+        padding: 0;
+        margin: 0;
+        border: none;
+        outline: none;
+
+        -webkit-appearance: none;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        i {
+            cursor: pointer;
+        }
+    }
+}

css/main.scss

@@ -70,6 +70,7 @@
 @import 'policy';
 @import 'popover';
 @import 'filmstrip';
+@import 'filmstrip/filmstrip_toolbar';
 @import 'unsupported-browser/main';
 @import 'modals/invite/add-people';
 @import 'vertical_filmstrip_overrides';