.star-rating {
  font-size: 1.5rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;

  & > input {
    display: none;
  }

  & > label:before {
    font-size: inherit;
    display: inline-block;
    font-family: 'Material Icons';
    content: 'star_border';
    color: #f6a623;
  }

  &:hover > label:before {
    color: #aaa;
  }

  & > input:checked ~ label,
  &:not(:checked) > label:hover,
  &:not(:checked) > label:hover ~ label {
    &:before {
      content: 'star';
    }
  }

  & > input + label:hover,
  & > input ~ label:hover,
  & > label:hover ~ input ~ label,
  & > input ~ label:hover ~ label {
    &:before {
      color: #f6a623;
    }
  }

  // Overwrite materialize styling
  label {
    height: unset !important;
    line-height: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;

    &:after {
      display: none !important;
    }

    &:before {
      position: static !important;
      border: none !important;
      width: unset !important;
      height: unset !important;
      line-height: unset !important;
      padding: 0 !important;
      margin: 0 !important;
    }
  }
}