.review-stars {
  --review-star-size: 16px;
  --review-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.9l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E");

  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--laa-color-fg, #000);
  font-family: var(--laa-font-body, inherit);
  font-size: var(--laa-text-body, 14px);
  line-height: 1;
  text-decoration: none;
}

.review-stars__stars {
  flex: none;
  inline-size: calc(var(--review-star-size) * 5);
  block-size: var(--review-star-size);
  background: linear-gradient(
    90deg,
    var(--laa-color-fg, #000) var(--review-fill, 0%),
    var(--laa-color-border-strong, #8a8a8a) var(--review-fill, 0%)
  );
  mask: var(--review-star-mask) 0 0 / var(--review-star-size) var(--review-star-size) repeat-x;
}

.review-stars--pdp {
  min-block-size: 24px;
  margin-block-end: 8px;
}

.review-stars--pdp:hover .review-stars__count,
.review-stars--pdp:focus-visible .review-stars__count {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.review-stars--card {
  --review-star-size: 12px;

  gap: 4px;
  margin-block: 4px;
  font-size: var(--laa-text-small, 12px);
}

.review-stars--card .review-stars__count {
  color: var(--laa-color-muted, #6b6b6b);
}