/* Basic styles for Content Scale Slider */
.css-scale-widget {
  width: 100%;
  box-sizing: border-box;
  --line-h-thickness: 1px;
  --line-h-color: #000;
  --line-h-round: 0;
  --line-v-thickness: 1px;
  --line-v-color: #000;
  --line-v-round: 0;
  --indicator-w: 5px;
  --indicator-h: 20px;
  --indicator-color: #000;
  padding: 10px 0;
}

.css-scale-inner {
  position: relative;
  width: 100%;
  height: 48px;
}

/* Hide native range visually */
.css-scale-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 48px;
  opacity: 0;
  z-index: 3;
  cursor: pointer;
}

/* Track */
.css-scale-track {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: calc(var(--indicator-h) + 12px);
  width: 100%;
  z-index: 1;
}

/* Horizontal line */
.css-scale-horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: var(--line-h-thickness);
  background: var(--line-h-color);
  width: 100%;
  border-radius: calc(var(--line-h-round) * 4px);
}

/* Ticks container */
.css-scale-ticks {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Individual ticks will be injected by JS */
.css-scale-ticks .tick {
  position: absolute;
  width: var(--line-v-thickness);
  height: 20px;
  background: var(--line-v-color);
  top: calc(50% - 10px);
  transform: translateY(-50%);
  border-radius: calc(var(--line-v-round) * 4px);
}

/* Indicator */
.css-scale-indicator {
  position: absolute;
  top: calc(50% - (var(--indicator-h) / 2));
  width: var(--indicator-w);
  height: var(--indicator-h);
  background: var(--indicator-color);
  transform: translateX(calc(100% - var(--indicator-w)));
  transition: left .12s linear, transform .12s linear;
  border-radius: calc(var(--indicator-round, 0) * 6px);
  z-index: 2;
}

/* Value display */
.css-scale-value {
  position: absolute;
  top: -22px;
  right: 0;
  font-size: 13px;
  z-index: 4;
}

.css-scale-apply {
  margin-top: 8px;
  padding: 6px 10px;
  border: none;
  background: #222;
  color: #fff;
  cursor: pointer;
  z-index: 4;
}