From ad226b1c94e7a1b238d6ab6b099b47ee3acb005a Mon Sep 17 00:00:00 2001
From: mister-ben <1676039+mister-ben@users.noreply.github.com>
Date: Tue, 30 Jul 2024 21:49:08 +0200
Subject: [PATCH] refactor: Reorder SASS styles to address deprecation

---
 src/css/components/_close-button.scss |  8 ++++----
 src/css/components/_layout.scss       |  6 +++---
 src/css/components/_volume.scss       | 15 ++++++++-------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/css/components/_close-button.scss b/src/css/components/_close-button.scss
index 2ebfcd9c34..07193e7b34 100644
--- a/src/css/components/_close-button.scss
+++ b/src/css/components/_close-button.scss
@@ -1,12 +1,12 @@
 .video-js .vjs-control.vjs-close-button {
-  & .vjs-icon-placeholder {
-    @extend .vjs-icon-cancel;
-  }
-
   cursor: pointer;
   height: 3em;
   position: absolute;
   right: 0;
   top: 0.5em;
   z-index: 2;
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-cancel;
+  }
 }
diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index 5e48b45e94..fdf9d25517 100644
--- a/src/css/components/_layout.scss
+++ b/src/css/components/_layout.scss
@@ -21,6 +21,9 @@
   // Avoiding helvetica: issue #376
   font-family: $text-font-family;
 
+  // reset word-break inside the player div
+  word-break: initial;
+
   // Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
   // checking fullScreenEnabled.
   &:-moz-full-screen { position: absolute; }
@@ -29,9 +32,6 @@
     width: 100% !important;
     height: 100% !important;
   }
-  
-  // reset word-break inside the player div
-  word-break: initial;
 }
 
 .video-js[tabindex="-1"] {
diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
index 904ec90a07..b86de7377e 100644
--- a/src/css/components/_volume.scss
+++ b/src/css/components/_volume.scss
@@ -35,27 +35,30 @@
 }
 
 .video-js .vjs-volume-panel {
+  @include transition(width 1s);
+
   &.vjs-hover .vjs-volume-control,
   &:active .vjs-volume-control,
   &:focus  .vjs-volume-control,
   & .vjs-volume-control:active,
   &.vjs-hover .vjs-mute-control  ~ .vjs-volume-control,
   & .vjs-volume-control.vjs-slider-active {
+    visibility: visible;
+    opacity: 1;
+    position: relative;
+    $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+    @include transition($transition-property);
+
     &.vjs-volume-horizontal {
       width: 5em;
       height: 3em;
       margin-right: 0;
     }
-    visibility: visible;
-    opacity: 1;
-    position: relative;
 
     &.vjs-volume-vertical {
       left: -3.5em;
       @include transition(left 0s);
     }
-    $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
-    @include transition($transition-property);
   }
 
   &.vjs-volume-panel-horizontal {
@@ -70,8 +73,6 @@
       width: 4em;
     }
   }
-
-  @include transition(width 1s);
 }
 
 .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {