/*
Star rating — a row of filled stars, drawn rather than typed. The markup comes from
salt_md_rating() in inc/helpers.php, which is also where the reason for drawing them is
recorded: the character the design uses is in neither DM Sans nor this theme, and every
font stack on the page falls back to whatever the operating system supplies.

The component owns the shape, the colour and the spacing between the stars; a block that
uses it sets the size through --rating-star-w, the way it sizes a button or a heading.

The row is a flex line and not text, so the gap is a gap: the design's tracking of 3 on a
15px glyph is a letter-spacing only because the stars are characters there. Measured on the
render the pitch is 18.75 and a star is 12.5 wide, which is a gap of 6.25 — that is the
number this component takes, and it is the same distance drawn a different way.
*/
.rating {
  display: flex;
  align-items: center;
  gap: var(--rating-gap);
}

/*
The height follows the width through the viewBox, so a block sets one number. The star is
wider than it is tall in the same proportion a regular five-pointed star always is.
*/
.rating__star {
  display: block;
  width: var(--rating-star-w);
  height: auto;
  fill: var(--rating-fg);
}