.toggleSwitchHolder {
  border: 1px solid #6e6e6e;
  border-radius: 5px 5px;
  padding: 20px;
  width: 70%;
  max-width: 600px;
  margin: 0 auto;
}
input:checked + label {
  color: blue;
}
label {
  display: flex;
  width: 75px;
  height: 35px;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  background: #222;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
}
label i {
  font-size: 18px;
}
label .fa-sun {
  color: gold;
  transition: 0.8s;
}
label .fa-moon {
  color: #fff;
  transition: 0.8s;
}
label .ball {
  display: none;
}

input:checked + label .fa-moon {
  transform: translateX(-43px);
}
input:checked + label .fa-sun {
  transform: translateX(43px);
}
label .fa-moon {
  opacity: 1;
}
input:checked + label .fa-moon {
  opacity: 0;
}
label .fa-sun {
  opacity: 0;
}
input:checked + label .fa-sun {
  opacity: 1;
}
label .ball {
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  top: 5px;
  left: 5px;
  background: #fff;
  border-radius: 50%;
  transition: 0.8s;
}
input:checked + label .ball {
  transform: translateX(40px);
}
label .fa-sun {
  transform: translateX(43px);
}
input:checked + label .fa-sun {
  transform: translateX(0);
}
label {
  transition: 0.3s;
}
input:checked + label {
  background: #c0c0c0;
}
input:checked + label .ball {
  background: #222;
}
input {
  display: none;
}
input:checked + label .fa-moon {
  transform: translateX(-43px) rotate(160deg);
}
label .fa-sun {
  transform: translateX(43px) rotate(250deg);
}
input:checked + label .fa-sun {
  transform: translateX(0), rotate(0);
}