chore: SASS clean up

src/sass/components/control.scss

@@ -29,7 +29,7 @@
 
   // Tab focus
   &.plyr__tab-focus {
-    @include plyr-tab-focus();
+    @include plyr-tab-focus;
   }
 }
 

src/sass/components/controls.scss

@@ -56,6 +56,7 @@
 .plyr [data-plyr='fullscreen'] {
   display: none;
 }
+
 .plyr--captions-enabled [data-plyr='captions'],
 .plyr--pip-supported [data-plyr='pip'],
 .plyr--airplay-supported [data-plyr='airplay'],

src/sass/components/menus.scss

@@ -10,6 +10,7 @@
   .plyr__control svg {
     transition: transform 0.3s ease;
   }
+
   .plyr__control[aria-expanded='true'] {
     svg {
       transform: rotate(90deg);
@@ -73,10 +74,7 @@
       color: $plyr-menu-color;
       display: flex;
       font-size: $plyr-font-size-menu;
-      padding-bottom: calc(#{$plyr-control-padding} / 1.5);
-      padding-left: calc(#{$plyr-control-padding} * 1.5);
-      padding-right: calc(#{$plyr-control-padding} * 1.5);
-      padding-top: calc(#{$plyr-control-padding} / 1.5);
+      padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5);
       user-select: none;
       width: 100%;
 
@@ -176,6 +174,7 @@
         &::before {
           background: $plyr-control-toggle-checked-background;
         }
+
         &::after {
           opacity: 1;
           transform: translateY(-50%) scale(1);

src/sass/components/sliders.scss

@@ -3,10 +3,11 @@
 // --------------------------------------------------------------
 
 .plyr--full-ui input[type='range'] {
-  -webkit-appearance: none; /* stylelint-disable-line */
+  appearance: none;
   background: transparent;
   border: 0;
   border-radius: calc(#{$plyr-range-thumb-height} * 2);
+
   // `color` property is used in JS to populate lower fill for WebKit
   color: $plyr-range-fill-background;
   display: block;
@@ -18,23 +19,25 @@
   width: 100%;
 
   &::-webkit-slider-runnable-track {
-    @include plyr-range-track();
+    @include plyr-range-track;
+
     background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
   }
 
   &::-webkit-slider-thumb {
-    @include plyr-range-thumb();
-    -webkit-appearance: none; /* stylelint-disable-line */
+    @include plyr-range-thumb;
+
+    appearance: none;
     margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
   }
 
   // Mozilla
   &::-moz-range-track {
-    @include plyr-range-track();
+    @include plyr-range-track;
   }
 
   &::-moz-range-thumb {
-    @include plyr-range-thumb();
+    @include plyr-range-thumb;
   }
 
   &::-moz-range-progress {
@@ -45,22 +48,24 @@
 
   // Microsoft
   &::-ms-track {
-    @include plyr-range-track();
+    @include plyr-range-track;
+
     color: transparent;
   }
 
   &::-ms-fill-upper {
-    @include plyr-range-track();
+    @include plyr-range-track;
   }
 
   &::-ms-fill-lower {
-    @include plyr-range-track();
+    @include plyr-range-track;
 
     background: currentColor;
   }
 
   &::-ms-thumb {
-    @include plyr-range-thumb();
+    @include plyr-range-thumb;
+
     // For some reason, Edge uses the -webkit margin above
     margin-top: 0;
   }
@@ -70,25 +75,25 @@
   }
 
   // Focus styles
-  &:focus {
-    outline: 0;
-  }
-
   &::-moz-focus-outer {
     border: 0;
   }
 
+  &:focus {
+    outline: 0;
+  }
+
   &.plyr__tab-focus {
     &::-webkit-slider-runnable-track {
-      @include plyr-tab-focus();
+      @include plyr-tab-focus;
     }
 
     &::-moz-range-track {
-      @include plyr-tab-focus();
+      @include plyr-tab-focus;
     }
 
     &::-ms-track {
-      @include plyr-tab-focus();
+      @include plyr-tab-focus;
     }
   }
 }

src/sass/components/tooltips.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-max-compound-selectors */
 // --------------------------------------------------------------
 // Tooltips
 // --------------------------------------------------------------