.checkbox {
  font-size: 1em;
  margin: 0;
  margin-top: 1em;
}

.checkbox:hover {
  cursor: pointer;
}

.checkbox .icon {
  min-width: 1.2em;
  margin-left: 0.2em;
}

.checkbox input[type="checkbox"], .checkbox .checked {
  display: none;
}

.checkbox input[type="checkbox"]:checked ~ .checked {
  display: inline-block;
}

.checkbox input[type="checkbox"]:checked ~ .unchecked {
  display: none;
}