.toggle {
  --toggle-padding: 4px;
  --toggle-height: 40px;
  --toggle-width: 200px;
  --toggle-color-background: #fff;
  --toggle-color-off: #ccc;
  --toggle-color-on: #fff;
  --toggle-color-knob: #1799DD;
  --toggle-color-shadow: #0004;

  box-sizing: border-box;
  display: inline-block;
  border: solid 2px var(--toggle-color-off);
  width: auto;
  border-radius: calc(var(--toggle-height) / 2);
  box-shadow: 0 0 3px var(--toggle-color-shadow);
  background-color: var(--toggle-color-background);
  width: var(--toggle-width);
  height: var(--toggle-height);
  position: relative;
}

.toggle-input {
  position: absolute;
  appearance: none;
  height: 100%;
  width: 100%;
  z-index: 20;
  cursor: pointer;
}


.toggle .options {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.toggle .option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: var(--toggle-padding);
  width: calc(50% - var(--toggle-padding) * 2);
  height: calc(100% - var(--toggle-padding) * 2);
  z-index: 10;
  transition: color 0.2s;
}

.toggle .option--0 {
  left: var(--toggle-padding);
}
.toggle .option--1 {
  right: var(--toggle-padding);
}

.toggle .knob {
  position: absolute;
  top: var(--toggle-padding);
  left: var(--toggle-padding);
  width: calc(50% - var(--toggle-padding) * 2);
  height: calc(100% - var(--toggle-padding) * 2);
  border-radius: calc(var(--toggle-height) / 2 - var(--toggle-padding));
  transition: left 0.2s;
  background-color: var(--toggle-color-knob);
}

.toggle-input:checked + .knob {
  left: calc(50% + var(--toggle-padding));
}

.toggle-input:not(:checked) ~ .options .option--0,
.toggle-input:checked ~ .options .option--1 {
  color: var(--toggle-color-on);
}

.toggle-input:checked ~ .options .option--0,
.toggle-input:not(:checked) ~ .options .option--1 {
  color: var(--toggle-color-off);
}