Fix star width and rewrite star widget with nice hovering

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -1,3 +1,4 @@
+@import "core/static/core/devices";
 @import "core/static/core/colors";
 
 
@@ -7,10 +8,6 @@ $pedagogy-hover-blue: #0e97ce;
 $pedagogy-light-blue: #caf0ff;
 $pedagogy-white-text: #f0f0f0;
 
-$small-devices: 576px;
-$medium-devices: 768px;
-$large-devices: 992px;
-
 .pedagogy {
   &.star-not-checked {
     color: #f7f7f7;
@@ -256,7 +253,7 @@ $large-devices: 992px;
 
     .ue-details-container {
       display: grid;
-      grid-template-columns: 150px 100px auto;
+      grid-template-columns: 150px 130px auto;
       grid-template-rows: 156px 1fr;
       grid-template-areas:
       "grade grade-stars ue-infos"
@@ -523,4 +520,40 @@ details.accordion>.accordion-content {
   background-color: $white-color;
   border-color: $pedagogy-orange;
   border-right: none;
+}
+
+fieldset.star {
+  label {
+    display: inline;
+    cursor: pointer;
+  }
+
+  .checked {
+    color: orange;
+  }
+
+  .unchecked {
+    color: gray;
+  }
+
+  .hovered {
+    color: #FFD700;
+  }
+
+  .checked.hovered {
+    color: orange;
+  }
+
+  .removed {
+    color: red;
+  }
+
+  input[type="radio"] {
+    display: none;
+  }
+
+  label:first-child {
+    margin-right: 10px;
+  }
+
 }