@layer component.state {
  .knob {
    cursor: pointer;
    transition: background-color 0.25s;
  }
  .knob {
    &:hover {
      background-color: color-mix(in srgb, currentColor, transparent 95%);
    }
  }
  .knob--primary {
    &:hover {
      background-color: color-mix(
        in srgb,
        contrast-color(var(--knob-color)),
        var(--knob-color) 80%
      );
    }
  }
}