.scrubber {
  --color-base: var(--color-gray-300);
  --color-highlight: var(--color-gray-400);
  --color-text: var(--color-gray-900);

  --slider-track-size: 4px;
  --slider-thumb-size: 20px;
  --slider-thumb-active-size: 24px;

  --button-height: 32px;

  display: flex;
  gap: 12px;
  padding-block-start: 1rem;
}

.scrubber button {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  border: 0;
  border-radius: 4px;
  height: var(--button-height);
  padding-inline: 12px;
  cursor: pointer;
  color: var(--color-text);
  background-color: var(--color-base);
  transition: background-color 0.15s;
}

.scrubber button:hover,
.scrubber button:active {
  background-color: var(--color-highlight);
}

.scrubber .action-button {
  width: var(--button-height);
  height: var(--button-height);
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/%3E%3C/svg%3E");
}

.scrubber.is-playing .action-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5'/%3E%3C/svg%3E");
}

.scrubber .slider {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.scrubber input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}

.scrubber input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--color-base);
  border-radius: 999px;
  height: var(--slider-track-size);
}

.scrubber input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--color-base);
  border-radius: 999px;
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  transform: translateY(calc(-50% + var(--slider-track-size) / 2));
  transition:
    background-color 0.15s,
    width 0.15s,
    height 0.15s;
}

.scrubber.is-active input[type="range"]::-webkit-slider-thumb,
.scrubber.is-playing input[type="range"]::-webkit-slider-thumb {
  background-color: var(--color-highlight);
  width: var(--slider-thumb-active-size);
  height: var(--slider-thumb-active-size);
}

.scrubber input[type="range"]::-moz-range-track {
  background-color: var(--color-base);
  border-radius: 999px;
  height: var(--slider-track-size);
}

.scrubber input[type="range"]::-moz-range-thumb {
  border: 0;
  background-color: var(--color-base);
  border-radius: 999px;
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  transition:
    background-color 0.15s,
    width 0.15s,
    height 0.15s;
}

.scrubber.is-active input[type="range"]::-moz-range-thumb,
.scrubber.is-playing input[type="range"]::-moz-range-thumb {
  background-color: var(--color-highlight);
  width: var(--slider-thumb-active-size);
  height: var(--slider-thumb-active-size);
}

.scrubber output {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, calc(-8px - 100%));
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text);
}

.scrubber .visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}