#video-container #video-popup .video-tools #video-progress-container {
  height: 1em;
  display: flex;
  align-items: center;
  user-select: none;
}

#video-container #video-popup .video-tools #video-progress {
  width: 97%;
  margin: auto;
  position: relative;
  display: flex;
  height: 0.2em;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: height 0.2s;
}

#video-container #video-popup .video-cut-container .video-tools #video-progress {
  width: 90%;
  transition: height 0.2s;
}

#video-container #video-popup .video-tools #video-progress-container:hover #video-progress,
#video-container #video-popup .video-tools #video-progress-container #video-progress.seeking {
  height: 0.3em;
  transition: height 0.2s;
}

#video-container #video-popup .video-tools #video-progress-fill {
  width: 50%;
  background: var(--primary);
  flex: 0;
  flex-basis: 0%;
}

#video-container #video-popup .video-tools #video-progress-handler {
  width: 0em;
  height: 0em;
  align-self: center;
  border-radius: 5px;
  cursor: grab;
  background-color: var(--primary);
  transition: all 0.2s;
}

#video-container #video-popup .video-tools #video-progress-container #video-progress.seeking #video-progress-handler {
  cursor: grabbing;
  border-radius: 10px;
  width: 0.7em;
  height: 0.7em;
  transition: all 0.2s;
}

body:has(#video-container #video-popup .video-tools #video-progress-container #video-progress.seeking) {
  cursor: grabbing;
}

#video-container #video-popup .video-tools #video-progress-container:hover #video-progress-handler {
  border-radius: 10px;
  width: 0.7em;
  height: 0.7em;
  transition: all 0.2s;
}

#video-container #video-popup .video-tools #video-progress-container #cutting-video-progress {
  width: 97%;
  margin: auto;
  display: flex;
  cursor: pointer;
  transition: height 0.2s;
}

#video-container #video-popup .video-tools #video-progress-container .slider-track {
  transition: height 0.2s;
}

#video-container #video-popup .video-tools #video-progress-container:hover .slider-track {
  height: 0.3em;
  transition: height 0.2s;
}

#video-container
  #video-popup
  .video-tools
  #video-progress-container
  #cutting-video-progress
  .double-range
  > input[type="range"]::-webkit-slider-thumb {
  background-color: var(--primary) !important;
  height: 1em;
  width: 0.5em;
  margin-top: -4px;
  border-radius: 2px;
  transition: all 0.2s;
}

#video-container
  #video-popup
  .video-tools
  #video-progress-container
  #cutting-video-progress
  .double-range
  > input[type="range"]::-moz-range-thumb {
  background-color: var(--primary) !important;
  height: 1em;
  width: 0.5em;
  margin-top: -4px;
  border-radius: 2px;
  transition: all 0.2s;
}

#video-container
  #video-popup
  .video-tools
  #video-progress-container:hover
  #cutting-video-progress
  .double-range
  > input[type="range"]::-webkit-slider-thumb {
  height: 1em;
  margin-top: -4px;
  transition: all 0.2s;
}

#video-container
  #video-popup
  .video-tools
  #video-progress-container:hover
  #cutting-video-progress
  .double-range
  > input[type="range"]::-moz-range-thumb {
  height: 1em;
  margin-top: -4px;
  transition: all 0.2s;
}