:root {
  --star-color: grey;
  --star-background: red;
}

.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
  
  display: inline-block;
  font-family: Times; // make sure ★ appears correctly
  line-height: 1;
  
  &::before {
    content: '\2605\2605\2605\2605\2605';
    letter-spacing: -2px;
    background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.slider-up {
  animation: startAnimation 2s 1;
  animation-direction: alternate;
}

@keyframes startAnimation {
  0%   {left: 0px; bottom: -160px;}
  100% {left: 0px; bottom: 0px;}
}
.close-slider-up {
  animation: closeStartAnimation 2s 1;
  animation-direction: alternate;
}

@keyframes closeStartAnimation {
  0%   {right: 0px; bottom: -50px;}
  100% {right: 0px; bottom: 110px;}
}