.ky-rating {
  --ky-rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M31.547 12a.848.848 0 00-.677-.577l-9.427-1.376-4.224-8.532a.847.847 0 00-1.516 0l-4.218 8.534-9.427 1.355a.847.847 0 00-.467 1.467l6.823 6.664-1.612 9.375a.847.847 0 001.23.893l8.428-4.434 8.432 4.432a.847.847 0 001.229-.894l-1.615-9.373 6.822-6.665a.845.845 0 00.214-.869z'/%3E%3C/svg%3E");

  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: var(--ky-rating-margin-top) 0 var(--ky-rating-margin-bottom);
  font-family: var(--font-body--family);
  font-size: var(--ky-rating-size-mobile);
  line-height: 1.25;
}

.ky-rating__stars {
  flex: none;
  width: 5.5625em;
  height: 1em;
  background: linear-gradient(
    90deg,
    var(--ky-rating-star-color) var(--ky-rating-value),
    var(--ky-rating-empty-color) var(--ky-rating-value)
  );
  mask: var(--ky-rating-star) left center / 1em 1em space no-repeat;
}

.ky-rating__divider {
  width: 1px;
  height: 0.75em;
  background-color: currentColor;
}

@media screen and (min-width: 750px) {
  .ky-rating {
    font-size: var(--ky-rating-size-desktop);
  }
}