.container {
  font: 80px/1.5 sans-serif;

  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.container .toggle-input {
  --off: #c7cad1;
  --mid: #50c862;
  --on: #1fc034;
  --transDur: 0.5s;
  --timing: cubic-bezier(0.6, 0, 0.4, 1);

  font: inherit;
  animation: bgOff var(--transDur) var(--timing);

  background-color: var(--off);
  border-radius: 0.67em / 0.5em;

  transition:
    background-color var(--transDur) var(--timing),
    box-shadow 0.3s ease;

  box-shadow:
    0 0.05em 0.1em #00000007 inset,
    0 -0.25em 0.25em #0001 inset,
    0 -0.5em 0 #0001 inset,
    0 0.1em 0.1em #0001;

  cursor: pointer;
  position: relative;
  width: 2.25em;
  height: 1.5em;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.container .toggle-input:hover {
  box-shadow:
    0 0.05em 0.1em #00000007 inset,
    0 -0.25em 0.25em #0001 inset,
    0 -0.5em 0 #0001 inset,
    0 0.15em 0.5em #00000033;
}
.container .toggle-input:before {
  animation: handleOff var(--transDur) var(--timing);

  background-color: #fff;

  border-radius: 0.5em / 0.375em;
  box-shadow:
    0 0.175em 0.175em 0 #0001 inset,
    0 0.375em 0 #0002 inset,
    0 0.375em 0 var(--off) inset,
    0 0.475em 0.1em #0001 inset;
  content: "";
  display: block;
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 1em;
  height: 0.75em;
}

.container .toggle-input:checked {
  animation: bgOn var(--transDur) var(--timing) forwards;
}

.container .toggle-input:checked:before {
  animation: handleOn var(--transDur) var(--timing) forwards;
}

.container .toggle-input:focus {
  outline: none;
}
@media (prefers-color-scheme: dark) {
  .container .toggle-input {
    --off: #5c6270;
    --mid: #199723;
  }
}
@keyframes bgOff {
  from {
    background-color: var(--on);
  }
  50% {
    background-color: var(--mid);
  }
  to {
    background-color: var(--off);
  }
}

@keyframes bgOn {
  from {
    background-color: var(--off);
  }
  50% {
    background-color: var(--mid);
  }
  to {
    background-color: var(--on);
  }
}

@keyframes handleOff {
  from {
    box-shadow:
      0 0.175em 0.175em 0 #0001 inset,
      0 0.375em 0 #0002 inset,
      0 0.375em 0 var(--on) inset,
      0 0.475em 0.1em #0001 inset;
    left: 1.125em;
    width: 1em;
  }
  50% {
    box-shadow:
      0 0.175em 0.175em 0 #0001 inset,
      0 0.375em 0 #0002 inset,
      0 0.375em 0 var(--mid) inset,
      0 0.475em 0.1em #0001 inset;
    left: 0.125em;
    width: 2em;
  }
  to {
    box-shadow:
      0 0.175em 0.175em 0 #0001 inset,
      0 0.375em 0 #0002 inset,
      0 0.375em 0 var(--off) inset,
      0 0.475em 0.1em #0001 inset;
    left: 0.125em;
    width: 1em;
  }
}

@keyframes handleOn {
  from {
    box-shadow:
      0 0.175em 0.175em 0 #0001 inset,
      0 0.375em 0 #0002 inset,
      0 0.375em 0 var(--off) inset,
      0 0.475em 0.1em #0001 inset;
    left: 0.125em;
    width: 1em;
  }
  50% {
    box-shadow:
      0 0.175em 0.175em 0 #0001 inset,
      0 0.375em 0 #0002 inset,
      0 0.375em 0 var(--mid) inset,
      0 0.475em 0.1em #0001 inset;
    left: 0.125em;
    width: 2em;
  }
  to {
    box-shadow:
      0 0.175em 0.175em 0 #0001 inset,
      0 0.375em 0 #0002 inset,
      0 0.375em 0 var(--on) inset,
      0 0.475em 0.1em #0001 inset;
    left: 1.125em;
    width: 1em;
  }
}