Clean up filmstrip styles

css/_filmstrip.scss

@@ -1,16 +1,56 @@
-.filmstrip {
+%align-right {
-    &__videos {
     @include flex();
     flex-direction: row-reverse;
     flex-wrap: nowrap;
     justify-content: flex-start;
+}
 
-        position:absolute;
+.filmstrip {
-        text-align:right;
+    position: absolute;
-        height:196px;
-        padding: 10px 10px 17px 5px;
     bottom: 0;
     right: 0;
+    padding: 10px 10px 17px 5px;
+    @extend %align-right;
+
+    &__toolbar {
+        @include flex();
+        flex-direction: column-reverse;
+        flex-wrap: nowrap;
+        position: relative;
+        z-index: 1;                     // Set z-index to make element visible
+        width: 20px;
+
+        button {
+            font-size: 14px;
+            line-height: 1.2;
+            text-align: center;
+            background: transparent;
+            opacity: 0.7;
+            height: auto;
+            width: 100%;
+            padding: 0;
+            margin: 0 1px;
+            border: none;
+            outline: none;
+
+            -webkit-appearance: none;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            i {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__videos {
+        @extend %align-right;
+        position:relative;
+        height:196px;
+        padding: 0;
+        bottom: 0;
         width:auto;
         border: 2px solid transparent;
         z-index: 5;
@@ -70,7 +110,3 @@
         }
     }
 }
-
-.filmstripToolbar + #remoteVideos {
-    padding-right: 24px;
-}

css/_videolayout_default.scss

@@ -532,34 +532,3 @@
 .moveToCorner + .moveToCorner {
     right: 80px;
 }
-
-.filmstripToolbar {
-    width: 20px;
-    position: absolute;
-    right: 4px;
-    bottom: 20px;
-    z-index: 6;
-
-    button {
-        font-size: 14px;
-        line-height: 1.2;
-        text-align: center;
-        background: transparent;
-        opacity: 0.7;
-        height: auto;
-        width: 100%;
-        padding: 0;
-        margin: 0 1px;
-        border: none;
-
-        -webkit-appearance: none;
-
-        &:hover {
-            opacity: 1;
-        }
-
-        i {
-            cursor: pointer;
-        }
-    }
-}

modules/UI/videolayout/FilmStrip.js

@@ -39,7 +39,7 @@ const FilmStrip = {
     _generateFilmStripToolbar() {
         let container = document.createElement('div');
         let isVisible = this.isFilmStripVisible();
-        container.className = 'filmstripToolbar';
+        container.className = 'filmstrip__toolbar';
 
         container.innerHTML = `
             <button id="hideVideoToolbar">