.sandbox-ui-knob {
  --sandbox-knob-size: 34px;
  --sandbox-knob-bg: color-mix(in srgb, var(--sandbox-ruler-bg) 72%, var(--sandbox-surface));
  --sandbox-knob-border: color-mix(in srgb, var(--sandbox-border) 86%, transparent);
  --sandbox-knob-fg: var(--sandbox-text);
  --sandbox-knob-accent: var(--sandbox-accent);
  position: relative;
  width: var(--sandbox-knob-size);
  height: var(--sandbox-knob-size);
  border-radius: 50%;
  border: 1px solid var(--sandbox-knob-border);
  background: var(--sandbox-knob-bg);
  display: inline-block;
  touch-action: none;
  user-select: none;
  cursor: ns-resize;
}

.sandbox-ui-knob:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sandbox-knob-accent) 58%, transparent),
    0 0 0 3px color-mix(in srgb, var(--sandbox-knob-accent) 24%, transparent);
}

.sandbox-ui-knob.is-dragging {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--sandbox-knob-accent) 46%, transparent),
    0 0 0 2px color-mix(in srgb, var(--sandbox-knob-accent) 20%, transparent);
}

.sandbox-ui-knob__indicator {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 2px;
  height: calc(var(--sandbox-knob-size) * 0.36);
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center calc(var(--sandbox-knob-size) * 0.42);
  border-radius: 2px;
  background: var(--sandbox-knob-fg);
}

.sandbox-ui-knob__value {
  position: absolute;
  left: 50%;
  bottom: -1.2rem;
  transform: translateX(-50%);
  font-size: .6rem;
  color: var(--sandbox-muted);
  white-space: nowrap;
  pointer-events: none;
}