:host {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 2;
}

.slider {
  cursor: pointer;
  flex-grow: 1;
  position: relative;
  height: 20px;
}

.progress {
  position: absolute;
  width: 0;
  background: var(--staytuned-player-scrubber-progress-color, #216fd4);
  transition: background-color 0.4s;
  z-index: 3;
  height: var(--staytuned-player-scrubber-height, 2px);
  margin: 9px 0;
  border-radius: var(--staytuned-player-scrubber-radius, 4px);
}

.total {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--staytuned-player-scrubber-duration-color, #e5e7e9);
  z-index: 1;
  height: var(--staytuned-player-scrubber-height, 2px);
  margin: 9px 0;
  border-radius: var(--staytuned-player-scrubber-radius, 4px);
}

.command {
  position: absolute;
  z-index: 4;
  left: 0;
  height: 100%;
  transform: translateX(-50%);
}

.handle {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease-in;
  transform-origin: center center;
  z-index: 5;
  fill: var(--staytuned-player-scrubber-handle-color, #216fd4);
}

.is-hovered .handle,
.is-mobile .handle {
  transform: translate(-50%, -50%) scale(0.5);
}

.is-dragging .handle {
  transform: translate(-50%, -50%) scale(1);
}

.backdrop {
  opacity: 0;
  fill: var(--staytuned-player-scrubber-backdrop-color, rgba(0, 0, 0, 0.2));
  transform: translateY(-25%) scale(0);
  transition: opacity 0.15s ease-in, transform 0.15s ease-in;
  transform-origin: center center;
}

.is-dragging .backdrop {
  opacity: 1;
  transform: translateY(-25%) scale(1);
}

.slider .hover-display-time {
  display: none;
}

.slider:hover .hover-display-time,
.slider.is-dragging .hover-display-time {
  display: block;
  position: absolute;
  top: -30px;
  color: white;
  background: black;
  border-radius: 5px;
  padding: 5px;
  font-size: 12px;
  margin-bottom: 400px;
}
.slider:hover .hover-display-time.white-display-time,
.slider.is-dragging .hover-display-time.white-display-time {
  color: #121720;
  background: white;
}

/* -------------------------------------------------------- */
/* --------- SLIDER THEMING SPECIFICS ----------------------*/
/* -------------------------------------------------------- */
.black-slider .progress {
  background: var(--staytuned-player-scrubber-progress-color, #000000);
}

.black-slider .handle {
  fill: var(--staytuned-player-scrubber-handle-color, #000000);
}

/* -------------------------------------------------------- */
/* --------- MOBILE PLAYER SPECIFICS -----------------------*/
/* -------------------------------------------------------- */
/* "N'afficher le curseur que lorsqu'on clique dessus" ...? */
.is-mobile-player .handle {
  display: none;
}

.is-mobile-player.is-dragging .handle {
  display: block;
}

.is-mobile-player .progress,
.is-mobile-player .total {
  height: var(--staytuned-player-scrubber-height, 3px);
}