[data-rating="0.0"] { --x: 0%; }
[data-rating="0.1"] { --x: 2%; }
[data-rating="0.2"] { --x: 4%; }
[data-rating="0.3"] { --x: 6%; }
[data-rating="0.4"] { --x: 8%; }
[data-rating="0.5"] { --x: 10%; }
[data-rating="0.6"] { --x: 12%; }
[data-rating="0.7"] { --x: 14%; }
[data-rating="0.8"] { --x: 16%; }
[data-rating="0.9"] { --x: 18%; }
[data-rating="1.0"] { --x: 20%; }
[data-rating="1.1"] { --x: 22%; }
[data-rating="1.2"] { --x: 24%; }
[data-rating="1.3"] { --x: 26%; }
[data-rating="1.4"] { --x: 28%; }
[data-rating="1.5"] { --x: 30%; }
[data-rating="1.6"] { --x: 32%; }
[data-rating="1.7"] { --x: 34%; }
[data-rating="1.8"] { --x: 36%; }
[data-rating="1.9"] { --x: 38%; }
[data-rating="2.0"] { --x: 40%; }
[data-rating="2.1"] { --x: 42%; }
[data-rating="2.2"] { --x: 44%; }
[data-rating="2.3"] { --x: 46%; }
[data-rating="2.4"] { --x: 48%; }
[data-rating="2.5"] { --x: 50%; }
[data-rating="2.6"] { --x: 52%; }
[data-rating="2.7"] { --x: 54%; }
[data-rating="2.8"] { --x: 56%; }
[data-rating="2.9"] { --x: 58%; }
[data-rating="3.0"] { --x: 60%; }
[data-rating="3.1"] { --x: 62%; }
[data-rating="3.2"] { --x: 64%; }
[data-rating="3.3"] { --x: 66%; }
[data-rating="3.4"] { --x: 68%; }
[data-rating="3.5"] { --x: 70%; }
[data-rating="3.6"] { --x: 72%; }
[data-rating="3.7"] { --x: 74%; }
[data-rating="3.8"] { --x: 76%; }
[data-rating="3.9"] { --x: 78%; }
[data-rating="4.0"] { --x: 80%; }
[data-rating="4.1"] { --x: 82%; }
[data-rating="4.2"] { --x: 84%; }
[data-rating="4.3"] { --x: 86%; }
[data-rating="4.4"] { --x: 88%; }
[data-rating="4.5"] { --x: 90%; }
[data-rating="4.6"] { --x: 92%; }
[data-rating="4.7"] { --x: 94%; }
[data-rating="4.8"] { --x: 96%; }
[data-rating="4.9"] { --x: 98%; }
[data-rating="5.0"] { --x: 100%; }

.colorbar .glsr-star {
    display: none;
}
.colorbar .glsr-stars {
    height: var(--glsr-summary-star);
}
.colorbar [data-rating]::before {
  background: linear-gradient( to right, red 0, red 24px, black 24px, black 25px, orange 25px, orange 49px, black 49px, black 50px, yellow 50px, yellow 74px, black 74px, black 75px, lime 75px, lime 99px, black 99px, black 100px, green 100px, green 124px);
  border-radius: 10px;
  border: 1px solid #000;
  box-sizing: border-box;
  content: '';
  display: flex;
  height: 10px;
  margin: 0 0;
  position: relative;
  width: 124px;
}
.colorbar [data-rating]::after {
  background: #000;
  box-sizing: border-box;
  content: '';
  height: 100%;
  left: calc(var(--x) - 1px);
  position: absolute;
  top: 0;
  width: 2px;
  z-index: 1;
}