.knob {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--panel);
  border: var(--border-inner);
  position: relative;
  cursor: grab;
  box-shadow:
    inset 0 1px var(--border-highlight),
    inset 0 -2px rgba(0,0,0,.2);
  flex-shrink: 0;
  touch-action: none;
}

.knob::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 16px;
  background: var(--border);
  border-radius: 2px;
  transform: translateX(-50%) rotate(var(--rotation, 0deg));
  transform-origin: bottom center;
}

.knob:active {
  cursor: grabbing;
}

.knob--sm {
  width: 32px;
  height: 32px;
}

.knob--sm::after {
  top: 4px;
  height: 11px;
  width: 2px;
  transform: translateX(-50%) rotate(var(--rotation, 0deg));
}

.knob--xs {
  width: 22px;
  height: 22px;
}

.knob--xs::after {
  top: 3px;
  height: 8px;
  width: 2px;
  transform: translateX(-50%) rotate(var(--rotation, 0deg));
}

.knob--lg {
  width: 64px;
  height: 64px;
}

.knob--lg::after {
  top: 8px;
  height: 22px;
  width: 4px;
}