.toggle-switch {
  cursor: pointer;
  display: inline-block;
  background: var(--bg-gray);
  border: 1px solid #FFF;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
}

.toggle-switch:before,
.toggle-switch:after {
  content: "";
}

.toggle-switch:before {
  display: block;
  background: #FFF;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.25s;
}

.toggle:hover .toggle-switch:before {
  background: #FFF;
}

.toggle-checkbox:checked+.toggle-switch {
  background: var(--bg-gray);
}

.toggle-checkbox:checked+.toggle-switch:before {
  left: 29px;
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}