.checkboxtoggler {
  width: 3em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  cursor: pointer;
}

.line-1 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

.line-2 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

.line-3 {
  background: #df6447;
  height: 0.3em;
  border-radius: 10em;
  transition-duration: 500ms;
}

#toggleChecker {
  height: 3em;
  width: 100%;
  display: none;
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-1 {
  -webkit-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
  -ms-transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
  transform: rotate(45deg) translateY(0.7em) translateX(0.7em);
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-2 {
  -webkit-transform: rotate(-45deg) translateY(0em) translateX(0.1em);
  -ms-transform: rotate(-45deg) translateY(0em) translateX(0.1em);
  transform: rotate(-45deg) translateY(0em) translateX(0.1em);
}

#toggleChecker:checked + #togglerLable .checkboxtoggler .line-3 {
  transform: scaleX(0);
  transform-origin: left;
}