--- /dev/null
+.video-js .vjs-mute-control,
+.video-js .vjs-volume-menu-button {
+ cursor: pointer;
+ @include flex(none);
+ @extend .vjs-icon-volume-high;
+}
+
+.video-js .vjs-mute-control.vjs-vol-0,
+.video-js .vjs-volume-menu-button.vjs-vol-0 {
+ @extend .vjs-icon-volume-mute;
+}
+.video-js .vjs-mute-control.vjs-vol-1,
+.video-js .vjs-volume-menu-button.vjs-vol-1 {
+ @extend .vjs-icon-volume-low;
+}
+.video-js .vjs-mute-control.vjs-vol-2,
+.video-js .vjs-volume-menu-button.vjs-vol-2 {
+ @extend .vjs-icon-volume-mid;
+}
+
+.video-js .vjs-volume-control {
+ width: 5em;
+ @include flex(none);
+ @include display-flex(center);
+}
+
+.video-js .vjs-volume-bar {
+ margin: 1.35em 0.45em;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal {
+ width: 5em;
+ height: 0.3em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical {
+ width: 0.3em;
+ height: 5em;
+ margin: 1.35em auto;
+}
+
+.video-js .vjs-volume-level {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+
+ background-color: $primary-foreground-color;
+
+ @extend .vjs-icon-circle;
+
+ // Volume handle
+ &:before {
+ position: absolute;
+ font-size: 0.9em; // Doing this to match the handle on play progress.
+ }
+}
+
+.vjs-slider-vertical .vjs-volume-level {
+ width: 0.3em;
+
+ // Volume handle
+ &:before {
+ top: -0.5em;
+ left: -0.3em;
+ }
+}
+.vjs-slider-horizontal .vjs-volume-level {
+ height: 0.3em;
+
+ // Volume handle
+ &:before {
+ top: -0.3em;
+ right: -0.5em;
+ }
+}
+
+// Assumes volume starts at 1.0.
+.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
+ height: 100%;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
+ width: 100%;
+}
+
+// The volume menu button is like menu buttons (captions/subtitles) but works
+// a little differently. It needs to be possible to tab to the volume slider
+// without hitting space bar on the menu button. To do this we're not using
+// display:none to hide the slider menu by default, and instead setting the
+// width and height to zero.
+.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
+ display: block;
+ width: 0;
+ height: 0;
+ border-top-color: transparent;
+}
+
+.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
+ left: 0.5em;
+ height: 8em;
+}
+.vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
+ left: -2em;
+}
+
+.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu-content {
+ height: 0;
+ width: 0;
+
+ // Avoids unnecessary scrollbars in the menu content. Primarily noticed in Chrome on Linux.
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+.vjs-volume-menu-button-vertical:hover .vjs-menu-content,
+.vjs-volume-menu-button-vertical:focus .vjs-menu-content,
+.vjs-volume-menu-button-vertical.vjs-slider-active .vjs-menu-content,
+.vjs-volume-menu-button-vertical .vjs-lock-showing .vjs-menu-content {
+ height: 8em;
+ width: 2.9em;
+}
+
+.vjs-volume-menu-button-horizontal:hover .vjs-menu-content,
+.vjs-volume-menu-button-horizontal:focus .vjs-menu-content,
+.vjs-volume-menu-button-horizontal .vjs-slider-active .vjs-menu-content,
+.vjs-volume-menu-button-horizontal .vjs-lock-showing .vjs-menu-content {
+ height: 2.9em;
+ width: 8em;
+}
+
+.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
+ // An inline volume should never have a menu background color.
+ // This protects it from external changes to background colors.
+ background-color: transparent !important;
+}