/* Inline SVG icons (IconHelper). Sized and aligned like the Font Awesome icon font they replace. */
@layer components {
  .glyph {
    display: inline-block;
    block-size: 1em;
    inline-size: auto;
    overflow: visible;
    vertical-align: -0.125em;
    fill: currentColor;
  }

  /* Five stars as one element, painted through a five-star mask. A review's own rating (data-stars)
     shows only that many: the mask keeps its full width and the element ends after the last star. */
  .rating-stars {
    --rating-stars-width: 3456; /* five-stars.svg is 512 high; its stars are 576 wide and 720 apart */

    display: inline-block;
    block-size: 1em;
    aspect-ratio: var(--rating-stars-width) / 512;
    vertical-align: -0.125em;
    background-color: var(--color-star);
    mask: url("/assets/icons/five-stars-fc038b26.svg") left / auto 100% no-repeat;

    &[data-stars="4"] { --rating-stars-width: 2736; }
    &[data-stars="3"] { --rating-stars-width: 2016; }
    &[data-stars="2"] { --rating-stars-width: 1296; }
    &[data-stars="1"] { --rating-stars-width: 576; }
  }

  /* Process steps on /kurzy-pro-firmy: plain numbers where icons used to be. */
  .step-number {
    font-weight: 500;
  }
}