@layer components {
  /* A webhook's tile: the source glyph on a tint of the integration's color, as an agent's tile. */
  .webhook-icon {
    display: inline-grid; flex: none; place-items: center; border-radius: 6px; color: var(--hook-color);
    background: light-dark(color-mix(in oklch, var(--hook-color) 14%, transparent), color-mix(in oklch, var(--hook-color) 18%, transparent));
  }
}