[data-vote] {
  --vote-color: #f1c40f;
  --no-vote-color: #bdc3c7;
  --vote-highlight-color: #f39c12;
  --vote-label-color: #34495e;
  --votes: 0%;
  
  
}

[data-stars] {
  padding: 4px 6px;
  width: fit-content;

  background: linear-gradient(
    to right,
    var(--vote-color) var(--votes),
    var(--no-vote-color) var(--votes) 100%
  );

  background-clip: text;
  color: transparent;
}

[data-vote] [data-rating] {
  cursor: pointer;
  transition: transform 0.3s ease;
  display: inline-block;
}

[data-vote]:not([data-disabled]) [data-rating]:hover,
[data-vote]:not([data-disabled]) [data-rating]:has(~ [data-rating]:hover) {
  transform: scale(1.6);
  color: var(--vote-highlight-color);
}

[data-vote][data-disabled="true"] [data-rating]:hover,
[data-vote][data-disabled="true"] [data-rating]:has(~ [data-rating]:hover) {
  transform: scale(1.6);
  color: var(--no-vote-color);
}

[data-vote] [data-label] {
  background: none;
  color: var(--vote-label-color);
  margin: 0;
  padding: 0;
}