@charset "UTF-8";
input[type='checkbox'] {
  appearance: none;
  font-size: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
input[type='checkbox']:after {
  content: "💡";
  filter: grayscale(100%);
}
input[type='checkbox']:checked::after {
  filter: grayscale(0);
}

#toggle + label {
  width: 6.3em;
  color: #222;
  font-weight: bold;
  transition: width 400ms, color 200ms;
}
#toggle + label span:nth-child(2) {
  display: none;
}
#toggle:focus, #toggle:hover {
  outline: none;
}
#toggle:focus:not(:checked):after, #toggle:hover:not(:checked):after {
  filter: grayscale(50%);
}
#toggle:focus:not(:checked) + label, #toggle:hover:not(:checked) + label {
  color: #000;
}
#toggle:checked, #toggle:checked + label {
  pointer-events: none;
}
#toggle:checked + label {
  width: 2.4em;
  color: #FC5;
}
#toggle:checked + label span:nth-child(1) {
  display: none;
}
#toggle:checked + label span:nth-child(2) {
  display: inline;
}

body {
  min-height: 100vh;
  background-color: #EEF;
  font-family: Lato, sans-serif;
  font-size: 4em;
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  justify-content: center;
}