.checkbox {
  --switch-track-inline-size: 2.75rem;
  --switch-track-block-size: 1.625rem;
  --switch-knob-inset: 3px;
  --switch-knob-offset: calc(var(--border-width) + var(--switch-knob-inset));
  --switch-knob-size: calc(var(--switch-track-block-size) - 2 * var(--switch-knob-offset));
  --switch-knob-travel: calc(
    var(--switch-track-inline-size) - var(--switch-knob-size) - 2 * var(--switch-knob-offset)
  );
}

.checkbox__track {
  position: relative;
  flex: none;
  inline-size: var(--switch-track-inline-size);
  block-size: var(--switch-track-block-size);
  border: var(--border-width) solid var(--color-control-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-sunken);
  transition:
    border-color var(--duration-state) var(--easing-state),
    background-color var(--duration-state) var(--easing-state);
}

.checkbox__knob {
  position: absolute;
  inset-block-start: var(--switch-knob-inset);
  inset-inline-start: var(--switch-knob-inset);
  inline-size: var(--switch-knob-size);
  block-size: var(--switch-knob-size);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  translate: 0;
  will-change: translate;
  transition: translate var(--duration-enter) var(--easing-enter);
}

.checkbox--switch:has(:checked) .checkbox__track {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.checkbox--switch:has(:checked) .checkbox__knob {
  translate: var(--switch-knob-travel);
}

@media (forced-colors: active) {
  .checkbox__track {
    outline: var(--border-width) solid currentcolor;
  }

  .checkbox__knob {
    background-color: currentcolor;
  }
}