Converted to 2 space indentation

1 files changed, 175 insertions, 173 deletions

diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 50a47248..49cec6f5 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -3,198 +3,200 @@
 // --------------------------------------------------------------
 
 .plyr__menu {
-    display: flex; // Edge fix
-    position: relative;
+  display: flex; // Edge fix
+  position: relative;
+
+  // Animate the icon
+  .plyr__control svg {
+    transition: transform 0.3s ease;
+  }
+  .plyr__control[aria-expanded='true'] {
+    svg {
+      transform: rotate(90deg);
+    }
 
-    // Animate the icon
-    .plyr__control svg {
-        transition: transform 0.3s ease;
+    // Hide tooltip
+    .plyr__tooltip {
+      display: none;
+    }
+  }
+
+  // The actual menu container
+  &__container {
+    animation: plyr-popup 0.2s ease;
+    background: $plyr-menu-background;
+    border-radius: 4px;
+    bottom: 100%;
+    box-shadow: $plyr-menu-shadow;
+    color: $plyr-menu-color;
+    font-size: $plyr-font-size-base;
+    margin-bottom: 10px;
+    position: absolute;
+    right: -3px;
+    text-align: left;
+    white-space: nowrap;
+    z-index: 3;
+
+    > div {
+      overflow: hidden;
+      transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    .plyr__control[aria-expanded='true'] {
-        svg {
-            transform: rotate(90deg);
-        }
 
-        // Hide tooltip
-        .plyr__tooltip {
-            display: none;
-        }
+    // Arrow
+    &::after {
+      border: 4px solid transparent;
+      border-top-color: $plyr-menu-background;
+      content: '';
+      height: 0;
+      position: absolute;
+      right: 15px;
+      top: 100%;
+      width: 0;
+    }
+
+    [role='menu'] {
+      padding: $plyr-control-padding;
+    }
+
+    [role='menuitem'],
+    [role='menuitemradio'] {
+      margin-top: 2px;
+
+      &:first-child {
+        margin-top: 0;
+      }
     }
 
-    // The actual menu container
-    &__container {
-        animation: plyr-popup 0.2s ease;
-        background: $plyr-menu-background;
-        border-radius: 4px;
-        bottom: 100%;
-        box-shadow: $plyr-menu-shadow;
-        color: $plyr-menu-color;
-        font-size: $plyr-font-size-base;
-        margin-bottom: 10px;
+    // Options
+    .plyr__control {
+      align-items: center;
+      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);
+      user-select: none;
+      width: 100%;
+
+      > span {
+        align-items: inherit;
+        display: flex;
+        width: 100%;
+      }
+
+      &::after {
+        border: 4px solid transparent;
+        content: '';
         position: absolute;
-        right: -3px;
-        text-align: left;
-        white-space: nowrap;
-        z-index: 3;
-
-        > div {
-            overflow: hidden;
-            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-        }
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      &--forward {
+        padding-right: calc(#{$plyr-control-padding} * 4);
 
-        // Arrow
         &::after {
-            border: 4px solid transparent;
-            border-top-color: $plyr-menu-background;
-            content: '';
-            height: 0;
-            position: absolute;
-            right: 15px;
-            top: 100%;
-            width: 0;
+          border-left-color: $plyr-menu-arrow-color;
+          right: 5px;
         }
 
-        [role='menu'] {
-            padding: $plyr-control-padding;
+        &.plyr__tab-focus::after,
+        &:hover::after {
+          border-left-color: currentColor;
         }
+      }
 
-        [role='menuitem'],
-        [role='menuitemradio'] {
-            margin-top: 2px;
+      &--back {
+        font-weight: $plyr-font-weight-regular;
+        margin: $plyr-control-padding;
+        margin-bottom: calc(#{$plyr-control-padding} / 2);
+        padding-left: calc(#{$plyr-control-padding} * 4);
+        position: relative;
+        width: calc(100% - (#{$plyr-control-padding} * 2));
 
-            &:first-child {
-                margin-top: 0;
-            }
+        &::after {
+          border-right-color: $plyr-menu-arrow-color;
+          left: $plyr-control-padding;
         }
 
-        // Options
-        .plyr__control {
-            align-items: center;
-            color: $plyr-menu-color;
-            display: flex;
-            font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
-            user-select: none;
-            width: 100%;
-
-            > span {
-                align-items: inherit;
-                display: flex;
-                width: 100%;
-            }
-
-            &::after {
-                border: 4px solid transparent;
-                content: '';
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-            }
-
-            &--forward {
-                padding-right: ceil($plyr-control-padding * 4);
-
-                &::after {
-                    border-left-color: rgba($plyr-menu-color, 0.8);
-                    right: 5px;
-                }
-
-                &.plyr__tab-focus::after,
-                &:hover::after {
-                    border-left-color: currentColor;
-                }
-            }
-
-            &--back {
-                $horizontal-padding: ($plyr-control-padding * 2);
-                font-weight: $plyr-font-weight-regular;
-                margin: $plyr-control-padding;
-                margin-bottom: floor($plyr-control-padding / 2);
-                padding-left: ceil($plyr-control-padding * 4);
-                position: relative;
-                width: calc(100% - #{$horizontal-padding});
-
-                &::after {
-                    border-right-color: rgba($plyr-menu-color, 0.8);
-                    left: $plyr-control-padding;
-                }
-
-                &::before {
-                    background: $plyr-menu-border-color;
-                    box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
-                    content: '';
-                    height: 1px;
-                    left: 0;
-                    margin-top: ceil($plyr-control-padding / 2);
-                    overflow: hidden;
-                    position: absolute;
-                    right: 0;
-                    top: 100%;
-                }
-
-                &.plyr__tab-focus::after,
-                &:hover::after {
-                    border-right-color: currentColor;
-                }
-            }
+        &::before {
+          background: $plyr-menu-border-color;
+          box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+          content: '';
+          height: 1px;
+          left: 0;
+          margin-top: calc(#{$plyr-control-padding} / 2);
+          overflow: hidden;
+          position: absolute;
+          right: 0;
+          top: 100%;
         }
 
-        .plyr__control[role='menuitemradio'] {
-            padding-left: $plyr-control-padding;
-
-            &::before,
-            &::after {
-                border-radius: 100%;
-            }
-
-            &::before {
-                background: rgba(#000, 0.1);
-                content: '';
-                display: block;
-                flex-shrink: 0;
-                height: 16px;
-                margin-right: $plyr-control-spacing;
-                transition: all 0.3s ease;
-                width: 16px;
-            }
-
-            &::after {
-                background: #fff;
-                border: 0;
-                height: 6px;
-                left: 12px;
-                opacity: 0;
-                top: 50%;
-                transform: translateY(-50%) scale(0);
-                transition: transform 0.3s ease, opacity 0.3s ease;
-                width: 6px;
-            }
-
-            &[aria-checked='true'] {
-                &::before {
-                    background: var(--plyr-color-main, $plyr-color-main);
-                }
-                &::after {
-                    opacity: 1;
-                    transform: translateY(-50%) scale(1);
-                }
-            }
-
-            &.plyr__tab-focus::before,
-            &:hover::before {
-                background: rgba(#000, 0.1);
-            }
+        &.plyr__tab-focus::after,
+        &:hover::after {
+          border-right-color: currentColor;
         }
+      }
+    }
 
-        // Option value
-        .plyr__menu__value {
-            align-items: center;
-            display: flex;
-            margin-left: auto;
-            margin-right: -($plyr-control-padding - 2);
-            overflow: hidden;
-            padding-left: ceil($plyr-control-padding * 3.5);
-            pointer-events: none;
+    .plyr__control[role='menuitemradio'] {
+      padding-left: $plyr-control-padding;
+
+      &::before,
+      &::after {
+        border-radius: 100%;
+      }
+
+      &::before {
+        background: rgba(#000, 0.1);
+        content: '';
+        display: block;
+        flex-shrink: 0;
+        height: 16px;
+        margin-right: $plyr-control-spacing;
+        transition: all 0.3s ease;
+        width: 16px;
+      }
+
+      &::after {
+        background: #fff;
+        border: 0;
+        height: 6px;
+        left: 12px;
+        opacity: 0;
+        top: 50%;
+        transform: translateY(-50%) scale(0);
+        transition: transform 0.3s ease, opacity 0.3s ease;
+        width: 6px;
+      }
+
+      &[aria-checked='true'] {
+        &::before {
+          background: $plyr-control-toggle-checked-background;
         }
+        &::after {
+          opacity: 1;
+          transform: translateY(-50%) scale(1);
+        }
+      }
+
+      &.plyr__tab-focus::before,
+      &:hover::before {
+        background: rgba($plyr-color-gray-900, 0.1);
+      }
+    }
+
+    // Option value
+    .plyr__menu__value {
+      align-items: center;
+      display: flex;
+      margin-left: auto;
+      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
+      overflow: hidden;
+      padding-left: calc(#{$plyr-control-padding} * 3.5);
+      pointer-events: none;
     }
+  }
 }