.radio-stars {
  text-align: left;

  font-size: 0;
}

.radio-stars-wrapper {
  display: inline-block;
  position: relative;

  direction: rtl;
  unicode-bidi: bidi-override;

  // Stars to the right of cursor
  &:hover .radio-star::before {
    content: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M528.1%20171.5L382%20150.2%20316.7%2017.8c-11.7-23.6-45.6-23.9-57.4%200L194%20150.2%2047.9%20171.5c-26.2%203.8-36.7%2036.1-17.7%2054.6l105.7%20103-25%20145.5c-4.5%2026.3%2023.2%2046%2046.4%2033.7L288%20439.6l130.7%2068.7c23.2%2012.2%2050.9-7.4%2046.4-33.7l-25-145.5%20105.7-103c19-18.5%208.5-50.8-17.7-54.6zM388.6%20312.3l23.7%20138.4L288%20385.4l-124.3%2065.3%2023.7-138.4-100.6-98%20139-20.2%2062.2-126%2062.2%20126%20139%2020.2-100.6%2098z%22%20fill%3D%22rgba(0%2C0%2C0%2C.2)%22%2F%3E%3C%2Fsvg%3E');
    color: $radio-star-empty-color;
  }

  // Stars under and to the left of cursor
  &:hover .radio-star:hover {
    &::before,
    ~ .radio-star::before {
      content: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M259.3%2017.8L194%20150.2%2047.9%20171.5c-26.2%203.8-36.7%2036.1-17.7%2054.6l105.7%20103-25%20145.5c-4.5%2026.3%2023.2%2046%2046.4%2033.7L288%20439.6l130.7%2068.7c23.2%2012.2%2050.9-7.4%2046.4-33.7l-25-145.5%20105.7-103c19-18.5%208.5-50.8-17.7-54.6L382%20150.2%20316.7%2017.8c-11.7-23.6-45.6-23.9-57.4%200z%22%20fill%3D%22%23FC9835%22%2F%3E%3C%2Fsvg%3E');
      color: $radio-star-color;
    }
  }

  &:not(:hover) input:checked + .radio-star::after {
    content: attr(data-rating);
    // opacity: 1;
  }
}

.radio-star {
  @extend %icon;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: static; // override %icon's positioning

  width: 1.1em;
  margin: 0;

  color:  $radio-star-empty-color;
  direction: ltr;
  font-size: 3.2rem;
  white-space: nowrap;


  @media (max-width: $screen-xs-max) {
    width: 1em;

    font-size: 4.8rem;
  }

  &::before {
    content: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M528.1%20171.5L382%20150.2%20316.7%2017.8c-11.7-23.6-45.6-23.9-57.4%200L194%20150.2%2047.9%20171.5c-26.2%203.8-36.7%2036.1-17.7%2054.6l105.7%20103-25%20145.5c-4.5%2026.3%2023.2%2046%2046.4%2033.7L288%20439.6l130.7%2068.7c23.2%2012.2%2050.9-7.4%2046.4-33.7l-25-145.5%20105.7-103c19-18.5%208.5-50.8-17.7-54.6zM388.6%20312.3l23.7%20138.4L288%20385.4l-124.3%2065.3%2023.7-138.4-100.6-98%20139-20.2%2062.2-126%2062.2%20126%20139%2020.2-100.6%2098z%22%20fill%3D%22rgba(0%2C0%2C0%2C.2)%22%2F%3E%3C%2Fsvg%3E');
  }

  input:checked ~ & {
    color: $radio-star-color;

    &::before {
      content: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M259.3%2017.8L194%20150.2%2047.9%20171.5c-26.2%203.8-36.7%2036.1-17.7%2054.6l105.7%20103-25%20145.5c-4.5%2026.3%2023.2%2046%2046.4%2033.7L288%20439.6l130.7%2068.7c23.2%2012.2%2050.9-7.4%2046.4-33.7l-25-145.5%20105.7-103c19-18.5%208.5-50.8-17.7-54.6L382%20150.2%20316.7%2017.8c-11.7-23.6-45.6-23.9-57.4%200z%22%20fill%3D%22%23FC9835%22%2F%3E%3C%2Fsvg%3E');
    }
  }

  // Rating text
  &::after {
    @include font-family-proxima-nova();

    pointer-events: none;
    position: absolute;
    top: .7em;
    left: 105%;

    color: $text-color;
    font-size: $font-size-xs;

    @media (max-width: $screen-xs-max) {
      font-size: 1.8rem;
      top: .8em;
      left: 102%;
    }
  }

  &:hover::after {
    content: attr(data-rating);
  }
}