/*
 * Chrome icons, Basecamp/Fizzy-style: each SVG lives in app/assets/images and is
 * painted with `background-color: currentColor` through a CSS mask, so the icon
 * inherits the surrounding text color and sizes to the font (--icon-size, 1em).
 * Reactions stay emoji — those are content, not chrome.
 */
@layer components {
  .icon {
    display: inline-block;
    flex: none;
    inline-size: var(--icon-size, 1em);
    block-size: var(--icon-size, 1em);
    vertical-align: -0.15em;
    background-color: currentColor;
    /* Propshaft has no autoprefixer, so the -webkit- mask props are hand-written
       (Safari < 15.4 + in-app webviews) — without them the mask no-ops and the
       icon paints as a solid currentColor square. */
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;

    &.icon--search {
      --svg: url("/assets/search-abc65aca.svg");
    }

    &.icon--fire {
      --svg: url("/assets/fire-48c9952b.svg");
    }

    &.icon--comment {
      --svg: url("/assets/comment-52ac96bb.svg");
    }

    &.icon--external {
      --svg: url("/assets/external-01adffac.svg");
    }

    &.icon--star {
      --svg: url("/assets/star-d1ff1c55.svg");
    }

    &.icon--share {
      --svg: url("/assets/share-34fce092.svg");
    }

    &.icon--react {
      --svg: url("/assets/react-d285878b.svg");
    }

    &.icon--bell {
      --svg: url("/assets/bell-0739e1ef.svg");
    }
  }

  /* The brand maple-leaf glyph, an inline SVG sized to the surrounding text. */
  .maple-leaf {
    inline-size: 1.2em;
    block-size: 1.2em;
  }
}