From 5d4b28c3a423a71676496ba5ed0b58ff0bd3c9df Mon Sep 17 00:00:00 2001
From: amtins <andre.martins@rts.ch>
Date: Tue, 13 Jun 2023 18:30:27 +0200
Subject: [PATCH] fix(volume): vertical slider causes viewport overflow in rtl
 layout

Fixes #7743
---
 src/css/components/_volume.scss | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
index da3019c0ab..740e6e8865 100644
--- a/src/css/components/_volume.scss
+++ b/src/css/components/_volume.scss
@@ -51,7 +51,11 @@
     position: relative;
 
     &.vjs-volume-vertical {
-      left: -3.5em;
+      height: 8em;
+      width: 3em;
+
+      pointer-events: initial;
+
       @include transition(left 0s);
     }
     $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
@@ -75,10 +79,6 @@
 }
 
 .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
-  height: 8em;
-  width: 3em;
-  left: -3000em;
-
   $transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
   @include transition($transition-property)
 }
@@ -192,10 +192,11 @@
 }
 
 .video-js .vjs-volume-vertical {
-  width: 3em;
-  height: 8em;
+  left: -3.5em;
   bottom: 8em;
 
+  pointer-events: none;
+
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 }