@layer component.theme {
  .knob {
    border: 1px solid #828282;
    background-color: transparent;
    text-transform: uppercase;
    padding: 0.65rem 1.3rem;
  }

  .knob--small {
    padding: 0.65rem;
    font-size: 0.75em;
  }

  .knob--primary {
    --knob-color: light-dark(var(--dark), var(--bright));
    background-color: var(--knob-color);
    color: contrast-color(var(--knob-color));
    border-color: contrast-color(var(--knob-color));
  }
}