input[type="radio"] {
  /* hide visually */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

label[for]:hover {
  cursor: pointer;
}

.rating {
  width: 8em;
}

.rating-input,
.rating-label {
  float: right;
}

.rating-label {
  color: #ccc;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 4rem;
  line-height: 2.8rem;
  margin: 0;
  padding: 0;
}

.rating-input:focus ~ .rating-label,
.rating-input:hover ~ .rating-label {
  color: #ffc700;
}

.rating-input:checked ~ .rating-label {
  color: #ffc700;
}

.input[type="checkbox"]+label, input[type="radio"]+label {
  margin-left: 0;
  margin-right: 0;
}