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