4 files changed, 27 insertions, 27 deletions
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 83d045a6..3acb3cc4 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -5,7 +5,7 @@
 .plyr__badge {
   background: $plyr-badge-background;
   border-radius: $plyr-badge-border-radius;
-  color: $plyr-badge-color;
+  color: $plyr-badge-text-color;
   font-size: $plyr-font-size-badge;
   line-height: 1;
   padding: 3px 4px;
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index eb3c9389..2acab086 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -19,21 +19,6 @@
   transition: transform 0.4s ease-in-out;
   width: 100%;
 
-  .plyr__caption {
-    background: $plyr-captions-background;
-    border-radius: 2px;
-    box-decoration-break: clone;
-    color: $plyr-captions-text-color;
-    line-height: 185%;
-    padding: 0.2em 0.5em;
-    white-space: pre-wrap;
-
-    // Firefox adds a <div> when using getCueAsHTML()
-    div {
-      display: inline;
-    }
-  }
-
   span:empty {
     display: none;
   }
@@ -56,3 +41,18 @@
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
   transform: translateY(calc(#{$plyr-control-spacing} * -4));
 }
+
+.plyr__caption {
+  background: $plyr-captions-background;
+  border-radius: 2px;
+  box-decoration-break: clone;
+  color: $plyr-captions-text-color;
+  line-height: 185%;
+  padding: 0.2em 0.5em;
+  white-space: pre-wrap;
+
+  // Firefox adds a <div> when using getCueAsHTML()
+  div {
+    display: inline;
+  }
+}
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 49cec6f5..fccf303e 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -44,12 +44,12 @@
 
     // Arrow
     &::after {
-      border: 4px solid transparent;
+      border: $plyr-menu-arrow-size solid transparent;
       border-top-color: $plyr-menu-background;
       content: '';
       height: 0;
       position: absolute;
-      right: 15px;
+      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
       top: 100%;
       width: 0;
     }
@@ -87,7 +87,7 @@
       }
 
       &::after {
-        border: 4px solid transparent;
+        border: $plyr-menu-item-arrow-size solid transparent;
         content: '';
         position: absolute;
         top: 50%;
@@ -98,8 +98,8 @@
         padding-right: calc(#{$plyr-control-padding} * 4);
 
         &::after {
-          border-left-color: $plyr-menu-arrow-color;
-          right: 5px;
+          border-left-color: $plyr-menu-item-arrow-color;
+          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &.plyr__tab-focus::after,
@@ -117,13 +117,13 @@
         width: calc(100% - (#{$plyr-control-padding} * 2));
 
         &::after {
-          border-right-color: $plyr-menu-arrow-color;
-          left: $plyr-control-padding;
+          border-right-color: $plyr-menu-item-arrow-color;
+          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &::before {
-          background: $plyr-menu-border-color;
-          box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+          background: $plyr-menu-back-border-color;
+          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
           content: '';
           height: 1px;
           left: 0;
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index b7872bcb..b90e7229 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -8,10 +8,10 @@
   background: transparent;
   border: 0;
   border-radius: calc(#{$plyr-range-thumb-height} * 2);
-  // color is used in JS to populate lower fill for WebKit
+  // `color` property is used in JS to populate lower fill for WebKit
   color: $plyr-range-fill-background;
   display: block;
-  height: $plyr-range-max-height;
+  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
   margin: 0;
   padding: 0;
   transition: box-shadow 0.3s ease;