2 files changed, 12 insertions, 12 deletions
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index 1cfca92e..b8e2d771 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -10,7 +10,7 @@
 .plyr__captions {
     animation: plyr-fade-in 0.3s ease;
     bottom: 0;
-    color: $plyr-captions-color;
+    color: var(--plyr-captions-text-color);
     display: none;
     font-size: $plyr-font-size-captions-small;
     left: 0;
@@ -21,7 +21,7 @@
     width: 100%;
 
     .plyr__caption {
-        background: $plyr-captions-bg;
+        background: var(--plyr-captions-background);
         border-radius: 2px;
         box-decoration-break: clone;
         line-height: 185%;
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 1c9aab2b..eedcab13 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -5,21 +5,21 @@
 .plyr__control {
     background: transparent;
     border: 0;
-    border-radius: $plyr-control-radius;
+    border-radius: var(--plyr-control-radius);
     color: inherit;
     cursor: pointer;
     flex-shrink: 0;
     overflow: visible; // IE11
-    padding: $plyr-control-padding;
+    padding: var(--plyr-control-padding);
     position: relative;
     transition: all 0.3s ease;
 
     svg {
         display: block;
         fill: currentColor;
-        height: $plyr-control-icon-size;
+        height: var(--plyr-control-icon-size);
         pointer-events: none;
-        width: $plyr-control-icon-size;
+        width: var(--plyr-control-icon-size);
     }
 
     // Default focus
@@ -71,18 +71,18 @@ a.plyr__control {
     &.plyr__tab-focus,
     &:hover,
     &[aria-expanded='true'] {
-        background: $plyr-video-control-bg-hover;
-        color: $plyr-video-control-color-hover;
+        background: var(--plyr-video-control-bg-hover);
+        color: var(--plyr-video-control-color-hover);
     }
 }
 
 // Large play button (video only)
 .plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
+    background: var(--plyr-video-control-bg-hover);
     border: 0;
     border-radius: 100%;
     box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: $plyr-video-control-color;
+    color: var(--plyr-video-control-color);
     display: none;
     left: 50%;
     padding: ceil($plyr-control-spacing * 1.5);
@@ -93,13 +93,13 @@ a.plyr__control {
 
     // Offset icon to make the play button look right
     svg {
-        left: 2px;
+        left: 2px; // Offset to make the play button look right
         position: relative;
     }
 
     &:hover,
     &:focus {
-        background: $plyr-video-control-bg-hover;
+        background: var(--plyr-video-control-bg-hover);
     }
 }