toggleInput.css

.bytm-toggle-input-wrapper {
  --toggle-height: 20px;
  --toggle-width: 40px;
  --toggle-knob-offset: 4px;
  --toggle-color-on: #3683d4;
  --toggle-color-off: #666;
  --toggle-knob-color: #f5f5f5;

  display: flex;
  align-items: center;
}

.bytm-toggle-input-wrapper .bytm-toggle-input-label {
  cursor: pointer;
  font-size: 1.5rem;
  padding: 3px 12px;
}

/* sauce: https://danklammer.com/articles/simple-css-toggle-switch/ */

.bytm-toggle-input {
  display: flex;
  align-items: center;
}

.bytm-toggle-input input {
  appearance: none;
  display: inline-block;
  width: var(--toggle-width);
  height: var(--toggle-height);
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  outline: none;
  border: none;
  margin: 0;
  padding: var(--toggle-knob-offset);
  cursor: pointer;
  background-color: var(--toggle-color-off);
  transition:
    justify-content 0.2s ease,
    background-color 0.2s ease;
}

.bytm-toggle-input input[data-toggled="true"] {
  background-color: var(--toggle-color-on);
}

.bytm-toggle-input input .bytm-toggle-input-knob {
  --toggle-knob-calc-width: calc(
    var(--toggle-height) - (var(--toggle-knob-offset) * 2)
  );
  --toggle-knob-calc-height: calc(
    var(--toggle-height) - (var(--toggle-knob-offset) * 2)
  );
  width: var(--toggle-knob-calc-width);
  height: var(--toggle-knob-calc-height);
  background-color: var(--toggle-knob-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: var(--toggle-knob-offset);
  transition: left 0.2s ease;
}

.bytm-toggle-input input[data-toggled="true"] .bytm-toggle-input-knob {
  left: calc(
    var(--toggle-width) - var(--toggle-knob-offset) -
      var(--toggle-knob-calc-width)
  );
}