*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.toggle {
  position: absolute;
  top: -9000px;
  left: -9000px;
}

.switch {
  display: flex;
  font-size: 3rem;
  align-items: center;
  gap: 0.3em;
}

.switch::before {
  content: "";
  background-color: hsl(0, 100%, 90%);
  width: 2em;
  height: 1em;
  border-radius: 1em;
  transition: background 0.2s ease-in-out;
}

.switch::after {
  content: "\2715";
  position: absolute;
  left: 0.4em;
  font-size: 0.6em;
  background-color: hsl(0, 100%, 70%);
  color: white;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease-in-out;
}

.toggle:checked + .switch::before {
  background-color: hsl(100, 100%, 90%);
}

.toggle:checked + .switch::after {
  content: "\2713";
  transform: translateX(105%);
  background-color: hsl(100, 100%, 70%);
}

.toggle:focus + .switch::before {
  outline: 1px solid black;
}

.toggle:disabled + .switch::before {
  background-color: hsl(0, 0%, 90%);
}

.toggle:disabled + .switch::after {
  background-color: hsl(0, 0%, 70%);
}