star-rating

rating.html

<fieldset class="rating">
  <legend class="visually-hidden">Звездный рейтинг</legend>
  <input id="film-1" type="radio" name="film" value="1">
  <input id="film-2" type="radio" name="film" value="2">
  <input id="film-3" type="radio" name="film" value="3">
  <input id="film-4" type="radio" name="film" value="4" checked>
  <input id="film-5" type="radio" name="film" value="5">

  <label for="film-5" aria-label="5 звезд">
    <svg width="44" height="43">
      <use href="#star"></use>
    </svg>

  </label>
  <label for="film-4" aria-label="4 звезды">
    <svg width="44" height="43">
      <use href="#star"></use>
    </svg>

  </label>
  <label for="film-3" aria-label="3 звезды">
    <svg width="44" height="43">
      <use href="#star"></use>
    </svg>

  </label>
  <label for="film-2" aria-label="2 звезды">
    <svg width="44" height="43">
      <use href="#star"></use>
    </svg>

  </label>
  <label for="film-1" aria-label="1 звездa">
    <svg width="44" height="43">
      <use href="#star"></use>
    </svg>

  </label>

</fieldset>

<!--<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 31"><path d="M1.19,12.67l7,6.94L6.68,29.27a.67.67,0,0,0,0,.34.64.64,0,0,0,.22.27.66.66,0,0,0,.33.12.65.65,0,0,0,.34-.07l8.89-4.4,8.89,4.4a.65.65,0,0,0,.34.07.66.66,0,0,0,.33-.12.64.64,0,0,0,.22-.27.67.67,0,0,0,0-.34L24.8,19.61l7-6.94A.64.64,0,0,0,32,12a.65.65,0,0,0-.51-.43L21.63,10,17.08,1.35a.65.65,0,0,0-1.16,0L11.37,10,1.54,11.6a.73.73,0,0,0-.31.14A.72.72,0,0,0,1,12a.64.64,0,0,0,.16.64Z"/></svg>-->

<!--.rating {
  position: relative;
  border: 0;
  display: flex;
  width: 100%;
  max-width: 200px;
  justify-content: space-between;

  input {
    position: absolute;
    width: 20%;
    height: 100%;
    z-index: 1;
    cursor: pointer;

    &:nth-of-type(1):checked ~ label:nth-of-type(5),
    &:nth-of-type(2):checked ~ label:nth-of-type(4),
    &:nth-of-type(2):checked ~ label:nth-of-type(5),
    &:nth-of-type(3):checked ~ label:nth-of-type(5),
    &:nth-of-type(3):checked ~ label:nth-of-type(4),
    &:nth-of-type(3):checked ~ label:nth-of-type(3),
    &:nth-of-type(4):checked ~ label:not(:nth-of-type(1)),
    &:nth-of-type(5):checked ~ label {
      fill: currentColor;
    }
  }

  &:not(:disabled) input {
    &:nth-of-type(1) {
      left: 0;

      &:hover {
        & ~ label:nth-of-type(5) {
          fill: currentColor;
        }

        & ~ label:not(:nth-of-type(5)) {
          fill: transparent;
        }
      }
    }

    &:nth-of-type(2) {
      left: 20%;

      &:hover {
        & ~ label:nth-of-type(4),
        & ~ label:nth-of-type(5) {
          fill: currentColor;
        }

        & ~ label:not(:nth-of-type(4)):not(:nth-of-type(5)) {
          fill: transparent;
        }
      }
    }

    &:nth-of-type(3) {
      left: 40%;

      &:hover {
        & ~ label:not(:nth-of-type(1)):not(:nth-of-type(2)) {
          fill: currentColor;
        }

        & ~ label:nth-of-type(1),
        & ~ label:nth-of-type(2) {
          fill: transparent;
        }
      }
    }

    &:nth-of-type(4) {
      left: 60%;

      &:hover {
        & ~ label:not(:nth-of-type(1)) {
          fill: currentColor;
        }

        & ~ label:nth-of-type(1) {
          fill: transparent;
        }
      }
    }

    &:nth-of-type(5) {
      left: 80%;

      &:hover ~ label {
        fill: currentColor;
      }
    }
  }

  label {
    width: 15.4%;
    stroke-width: 2;
    stroke: currentColor;
    fill: transparent;
    transition: fill $delay-default;

    @media (max-width: $viewport-s) {
      width: 10%;
    }

    &:nth-of-type(1) {
      order: 5;
    }

    &:nth-of-type(2) {
      order: 4;
    }

    &:nth-of-type(3) {
      order: 3;
    }

    &:nth-of-type(4) {
      order: 2;
    }

    &:nth-of-type(5) {
      order: 1;
    }
  }

  svg {
    display: block;
    width: 100%;
    height: auto;
  }
}-->