/* Preserve each icon's own fill and stroke settings from the SVG export. */
.r3d-icon {
  --r3d-icon-tint: color-mix(in srgb, currentColor 20%, white);
  --r3d-icon-tint-20: color-mix(in srgb, currentColor 80%, white);
  --r3d-icon-tint-40: color-mix(in srgb, currentColor 60%, white);
  --r3d-icon-tint-60: color-mix(in srgb, currentColor 40%, white);
  --r3d-icon-shade-20: color-mix(in srgb, currentColor 80%, black);
  --r3d-icon-tone-60: color-mix(in srgb, currentColor 60%, black);
  --r3d-icon-tone-20: color-mix(in srgb, currentColor 20%, black);
  display: inline-block;
  width: var(--r3d-icon-size, 1em);
  height: var(--r3d-icon-size, 1em);
  vertical-align: middle;
  flex: none;
  color: inherit;
  stroke: none;
  /* The template guide sets scale; clipping it cuts strokes at fractional
     CSS positions. The referenced symbols also allow visible overflow. */
  overflow: visible;
}

/* Match the Discord mark's 18 px outer width in the profile menu. */
.profile-dropdown .pd-icon { --r3d-icon-size: 18px; }
.hm-scroll-cue { --r3d-icon-size: 24px; }

/* The search magnifier is an outline: its lens filled near-white read as the
   🔍 emoji inside search fields. Same in every search box and button. */
.r3d-icon[data-r3d-icon="search"] { --r3d-icon-tint: transparent; }