/* 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. */
  .rating-stars {
    display: inline-block;
    block-size: 1em;
    aspect-ratio: 3456 / 512; /* five-stars.svg */
    vertical-align: -0.125em;
    background-color: var(--color-star);
    mask: url("/assets/icons/five-stars-fc038b26.svg") center / contain no-repeat;
  }

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