1 files changed, 37 insertions, 39 deletions
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index 85899ef3..eb3c9389 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -4,57 +4,55 @@
 
 // Hide default captions
 .plyr--full-ui ::-webkit-media-text-track-container {
-    display: none;
+  display: none;
 }
 
 .plyr__captions {
-    animation: plyr-fade-in 0.3s ease;
-    bottom: 0;
-    display: none;
-    font-size: $plyr-font-size-captions-small;
-    left: 0;
-    padding: $plyr-control-spacing;
-    position: absolute;
-    text-align: center;
-    transition: transform 0.4s ease-in-out;
-    width: 100%;
-
-    .plyr__caption {
-        background: $plyr-captions-background;
-        background: var(--plyr-captions-background, $plyr-captions-background);
-        border-radius: 2px;
-        box-decoration-break: clone;
-        color: $plyr-captions-text-color;
-        color: var(--plyr-captions-text-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;
-        }
+  animation: plyr-fade-in 0.3s ease;
+  bottom: 0;
+  display: none;
+  font-size: $plyr-font-size-captions-small;
+  left: 0;
+  padding: $plyr-control-spacing;
+  position: absolute;
+  text-align: center;
+  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;
-    }
+  span:empty {
+    display: none;
+  }
 
-    @media (min-width: $plyr-bp-sm) {
-        font-size: $plyr-font-size-captions-base;
-        padding: ($plyr-control-spacing * 2);
-    }
+  @media (min-width: $plyr-bp-sm) {
+    font-size: $plyr-font-size-captions-base;
+    padding: calc(#{$plyr-control-spacing} * 2);
+  }
 
-    @media (min-width: $plyr-bp-md) {
-        font-size: $plyr-font-size-captions-medium;
-    }
+  @media (min-width: $plyr-bp-md) {
+    font-size: $plyr-font-size-captions-medium;
+  }
 }
 
 .plyr--captions-active .plyr__captions {
-    display: block;
+  display: block;
 }
 
 // If the lower controls are shown and not empty
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 4));
+  transform: translateY(calc(#{$plyr-control-spacing} * -4));
 }