*, :root {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --dark: #292C35;
	--light: #F1F1F1;
	--label: #111;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--dark);
}

#switch {
  position: relative;
}

button {
  width: 86.31px;
  height: 86.31px;
  background: #FFF;
  border-radius: 50%;  
  border: 0; 
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  animation: slide-back 0.4s;
  cursor: pointer;
}

.active button {
  animation: slide-in 0.4s forwards;
}

span {
  display: flex;
  justify-content: start;
  background: var(--label);
  width: 235.38px;
  height: 102px;
  border-radius: 60px;
}

img {
  position: relative;
  padding:  4px 10px
}

@keyframes slide-in {
    from {
        right: 0;
    }
    to {
      right: 60%;  
    }
}

@keyframes slide-back {
  from {
    right:60%;
  } 
   to {
    right: 10px;
   }
}