.toggle-checkbox {
  --toggle-track-width: 33px;
  --toggle-width: calc(var(--toggle-track-width) - 19px);
  position: absolute;
  width: 33px;
  width: var(--toggle-track-width);
  height: calc(var(--toggle-track-width) - 15px);
}
.toggle-checkbox__input {
  display: none;
}
.toggle-checkbox__label {
  cursor: pointer;
}
.toggle-checkbox__label:before {
  content: "";
  background-color: #e0e0e0;
  background-color: var(--light, #e0e0e0) var(--dark, #ccc);
  width: 100%;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  border-radius: 10px;
}
.toggle-checkbox__label:after {
  content: "";
  background-color: #fff;
  width: 14px;
  width: var(--toggle-width);
  height: 14px;
  height: var(--toggle-width);
  display: block;
  position: absolute;
  left: 0px;
  top: 2px;
  border-radius: 100%;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
  transform: translateX(2px);
  transition: transform ease 0.2s;
}
.toggle-checkbox__input:checked + .toggle-checkbox__label:before {
  background-color: var(--theme-base-color);
}
.toggle-checkbox__input:checked + .toggle-checkbox__label:after {
  transform: translateX(calc(var(--toggle-track-width) - var(--toggle-width) - 2px));
}