refactor: Reorder SASS styles to address deprecation (#8821)

## Description
Some of the existing rules would be interpreted differently in a future
version of SASS. In the current version, they trigger a deprecation
warning. See
https://sass-lang.com/documentation/breaking-changes/mixed-decls/

## Specific Changes proposed
Re-orders rules to maintain current output and remove warnings. The
output of video-js.css and video-js.min.css remains the same.

## Requirements Checklist
- [x] Feature implemented / Bug fixed
- [ ] If necessary, more likely in a feature request than a bug fix
- [x] Change has been verified in an actual browser (Chrome, Firefox,
IE)
  - [ ] Unit Tests updated or fixed
  - [ ] Docs/guides updated
- [ ] Example created ([starter template on
JSBin](https://codepen.io/gkatsev/pen/GwZegv?editors=1000#0))
- [x] Has no DOM changes which impact accessiblilty or trigger warnings
(e.g. Chrome issues tab)
  - [x] Has no changes to JSDoc which cause `npm run docs:api` to error
- [ ] Reviewed by Two Core Contributors

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;
+  }
 }

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"] {

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 {