.slider {
  --slider-percent: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.slider__track {
  position: relative;
  height: 2px;
  border-radius: var(--radius-4);
  background: var(--color-gray-100);
}

.slider__scale {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  height: 8px;
}

.slider__scale span {
  flex: 1 0 0;
  min-width: 1px;
}

.slider__scale span + span {
  border-left: 1px solid var(--color-gray-100);
}

.slider__range {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 2px;
  width: calc(8px + var(--slider-percent) * (100% - 16px));
  border-radius: var(--radius-32);
  background: var(--color-accent-400);
}

.slider .slider-control {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
}

.slider__labels {
  display: flex;
  align-items: flex-start;
  padding-top: var(--spacing-8);
  color: var(--color-gray-500);
  word-break: break-word;
}

.slider__label {
  flex: 1 0 0;
  min-width: 1px;
  margin: 0;
}

.slider__label--center { text-align: center; }
.slider__label--end    { text-align: right; }

.slider:not(.slider--scale) .slider__labels { gap: var(--spacing-12); }

.slider--live .slider__track {
  cursor: pointer;
  touch-action: none;
}

.slider--live .slider__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 20px;
}

.slider--live .slider-control { z-index: 1; }