1 files changed, 32 insertions, 31 deletions

diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 41426e8b..87494957 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -14,42 +14,46 @@
     justify-content: flex-end;
     text-align: center;
 
-    // Spacing
-    > .plyr__control,
-    .plyr__progress,
-    .plyr__time,
-    .plyr__menu,
-    .plyr__volume {
-        margin-left: ($plyr-control-spacing / 2);
+    .plyr__progress__container {
+        flex: 1;
     }
 
-    .plyr__menu + .plyr__control,
-    > .plyr__control + .plyr__menu,
-    > .plyr__control + .plyr__control,
-    .plyr__progress + .plyr__control {
-        margin-left: floor($plyr-control-spacing / 4);
-    }
+    // Spacing
+    .plyr__controls__item {
+        margin-left: ($plyr-control-spacing / 4);
+
+        &:first-child {
+            margin-left: 0;
+            margin-right: auto;
+        }
+
+        &.plyr__progress__container {
+            padding-left: ($plyr-control-spacing / 4);
+        }
+
+        &.plyr__time {
+            padding: 0 ($plyr-control-spacing / 2);
+        }
 
-    > .plyr__control:first-child,
-    > .plyr__control:first-child + [data-plyr='pause'] {
-        margin-left: 0;
-        margin-right: auto;
+        &.plyr__progress__container:first-child,
+        &.plyr__time:first-child,
+        &.plyr__time + .plyr__time {
+            padding-left: 0;
+        }
+
+        &.plyr__volume {
+            padding-right: ($plyr-control-spacing / 2);
+        }
+
+        &.plyr__volume:first-child {
+            padding-right: 0;
+        }
     }
 
     // Hide empty controls
     &:empty {
         display: none;
     }
-
-    @media (min-width: $plyr-bp-sm) {
-        > .plyr__control,
-        .plyr__menu,
-        .plyr__progress,
-        .plyr__time,
-        .plyr__volume {
-            margin-left: $plyr-control-spacing;
-        }
-    }
 }
 
 // Audio controls
@@ -62,10 +66,7 @@
 
 // Video controls
 .plyr--video .plyr__controls {
-    background: linear-gradient(
-        rgba($plyr-video-controls-bg, 0),
-        rgba($plyr-video-controls-bg, 0.7)
-    );
+    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     bottom: 0;