/* VIDEO JS Custom Styling */

/* Allows vertical resizing within min and max height limits */
.vjs-custom {
  min-height: 7rem;
  max-height: 72vh;
}

.vjs-custom .video-js {
  height: 100%;
  width: 100%;
  position: static; /* Ensures video_player resizes with the window */
  font-size: large;
}

.vjs-custom .video-js .vjs-control-bar {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0.5em;
  height: 4.3em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.vjs-custom .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1em;
}

.vjs-custom .vjs-progress-holder > .vjs-mouse-display {
  font-size: 1.6666667em;
}

.vjs-volume-tooltip {
  display: none !important;
}

.vjs-custom .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: rgba(0, 0, 0, 0.5);
  bottom: 2.7em;
  border-radius: 0.3em;
}

.vjs-custom .vjs-menu li.vjs-selected {
  background-color: #4f46e5;
  color: #fff;
}

.vjs-custom .vjs-menu li.vjs-menu-item:hover,
.vjs-custom .vjs-load-progress {
  background-color: rgba(255, 255, 255, 0.4);
}

.vjs-custom .video-js,
.vjs-custom .vjs-playback-rate,
.vjs-custom .vjs-playback-rate-value,
.vjs-custom .vjs-menu-item-text {
  font-size: 14px;
}

/* Fix time displays to show inline */
.vjs-custom .vjs-current-time,
.vjs-custom .vjs-time-divider,
.vjs-custom .vjs-duration {
  display: inline-block !important;
  margin: 0;
  padding: 0;
}

.vjs-custom .vjs-time-control {
  min-width: 0.4em;
  padding-right: 0.4em;
}

.vjs-custom .vjs-duration {
  padding-right: 1em;
}

.vjs-custom .video-js .vjs-load-progress div {
  background-color: transparent;
}

.vjs-custom .vjs-play-progress,
.vjs-custom .vjs-volume-level {
  background-color: #4f46e5;
}

.vjs-custom .vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
  transform: translateY(-0.3em);
}

.vjs-custom .vjs-svg-icon:hover,
.vjs-custom .vjs-control:focus .vjs-svg-icon {
  filter: none;
}

/* Hide the tooltip that follows the playback progress bar */
.vjs-custom .vjs-play-progress > .vjs-time-tooltip,
.vjs-custom .video-js .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip {
  display: none !important;
}

.vjs-custom .vjs-volume-level,
.vjs-custom .vjs-play-progress,
.vjs-custom .vjs-slider-bar,
.vjs-custom .vjs-progress-holder,
.vjs-custom .vjs-load-progress,
.vjs-custom .vjs-control-text,
.vjs-custom .vjs-slider-horizontal,
.vjs-custom .vjs-slider {
  border-radius: 0.5em;
}

.vjs-custom .vjs-playback-rate-value {
  margin-top: 0.45em;
}

.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
  text-shadow: none;
}

.vjs-custom .vjs-custom-progress-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.vjs-custom .vjs-custom-control-buttons-container {
  display: flex;
  justify-content: space-between;
}

.vjs-custom .video-js .vjs-skip-forward-5 {
  width: 3.3em;
}

.vjs-custom .video-js .vjs-skip-backward-5 {
  margin-right: 8px;
}

.vjs-custom-left-controls,
.vjs-custom-right-controls,
.vjs-custom-skip-forward,
.vjs-custom-skip-backward {
  display: flex;
}

.vjs-custom-skip-forward,
.vjs-custom-skip-backward {
  align-items: center;
}

/* Show ONLY on hover */
.video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: block !important;
  opacity: 1 !important;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display .vjs-time-tooltip {
  opacity: 1 !important;
}

/* Playback rate button styling */
.vjs-custom .vjs-playback-rate {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vjs-custom .vjs-playback-rate .vjs-playback-rate-value {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.vjs-custom .vjs-progress-control {
  order: -1; /* Move to top */
  width: 100% !important;
  flex: 0 0 auto;
}