:global(.webchat-fluent) .fluent-icon {
  min-width: var(--webchat__fluent-icon--size, 1em);
  min-height: var(--webchat__fluent-icon--size, 1em);
  place-self: center;

  /* Use the image as texture. */
  background-image: var(--webchat__fluent-icon--image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--webchat__fluent-icon--size, 1em);

  /* If image is not set, fallback to solid color. */
  background-color: var(--webchat__fluent-icon--color, transparent);

  /* 3. Set the mask if any. */
  -webkit-mask-image: var(--webchat__fluent-icon--mask);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: var(--webchat__fluent-icon--size, 1em);
  mask-image: var(--webchat__fluent-icon--mask);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: var(--webchat__fluent-icon--size, 1em);
}

/* #region: Appearance */
:global(.webchat) .appearance--text {
  --webchat__fluent-icon--color: currentColor;
}
/* #endregion */

/* #region: Icons */
:global(.webchat) .icon--add-document {
  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 2a2 2 0 0 0-2 2v5.2c.32-.08.66-.15 1-.18V4a1 1 0 0 1 1-1h4v3.5c0 .83.67 1.5 1.5 1.5H15v8a1 1 0 0 1-1 1h-3.6c-.18.36-.4.7-.66 1H14a2 2 0 0 0 2-2V7.41c0-.4-.16-.78-.44-1.06l-3.91-3.91A1.5 1.5 0 0 0 10.59 2H6Zm8.8 5h-3.3a.5.5 0 0 1-.5-.5V3.2L14.8 7ZM10 14.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm-4-2a.5.5 0 0 0-1 0V14H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H6v-1.5Z"/></svg>');
}

:global(.webchat) .icon--attachment {
  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m4.83 10.48 5.65-5.65a3 3 0 0 1 4.25 4.24L8 15.8a1.5 1.5 0 0 1-2.12-2.12l6-6.01a.5.5 0 1 0-.7-.71l-6 6.01a2.5 2.5 0 0 0 3.53 3.54l6.71-6.72a4 4 0 1 0-5.65-5.66L4.12 9.78a.5.5 0 0 0 .7.7Z"/></svg>');
}

:global(.webchat) .icon--info-16 {
  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z"/></svg>');
}

:global(.webchat) .icon--send {
  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.18 2.11a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .9l-15 7.5a.5.5 0 0 1-.7-.58L3.98 10 2.02 2.63a.5.5 0 0 1 .16-.52Zm2.7 8.39-1.61 6.06L16.38 10 3.27 3.44 4.88 9.5h6.62a.5.5 0 1 1 0 1H4.88Z"/></svg>');
}

:global(.webchat) .icon--keypad {
  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm0 4a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM7.25 12a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM10 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM11.25 16a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 5.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.25 8a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM14 13.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"/></svg>');
}

:global(.webchat) .icon--microphone {
  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 9.99998C5.5 9.72384 5.27614 9.49998 5 9.49998C4.72386 9.49998 4.5 9.72384 4.5 9.99998C4.5 12.869 6.69675 15.2249 9.5 15.4776V17.5C9.5 17.7761 9.72386 18 10 18C10.2761 18 10.5 17.7761 10.5 17.5V15.4776C13.3033 15.2249 15.5 12.869 15.5 9.99998C15.5 9.72384 15.2761 9.49998 15 9.49998C14.7239 9.49998 14.5 9.72384 14.5 9.99998C14.5 12.4853 12.4853 14.5 10 14.5C7.51472 14.5 5.5 12.4853 5.5 9.99998ZM13 10.0007C12.9996 11.6573 11.6566 13 10 13C8.34315 13 7 11.6568 7 9.99998V5C7 3.34315 8.34315 2 10 2C11.6569 2 13 3.34315 13 5V10.0007Z"/></svg>');
}

:global(.webchat) .icon--audio-playing {
  --webchat__fluent-icon--mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2C10.4142 2 10.75 2.33579 10.75 2.75V17.25C10.75 17.6642 10.4142 18 10 18C9.58579 18 9.25 17.6642 9.25 17.25V2.75C9.25 2.33579 9.58579 2 10 2ZM13.75 5C14.1642 5 14.5 5.33579 14.5 5.75V14.25C14.5 14.6642 14.1642 15 13.75 15C13.3358 15 13 14.6642 13 14.25V5.75C13 5.33579 13.3358 5 13.75 5ZM7 5.75C7 5.33579 6.66421 5 6.25 5C5.83579 5 5.5 5.33579 5.5 5.75V14.25C5.5 14.6642 5.83579 15 6.25 15C6.66421 15 7 14.6642 7 14.25V5.75ZM17.25 8C17.6642 8 18 8.33579 18 8.75V11.25C18 11.6642 17.6642 12 17.25 12C16.8358 12 16.5 11.6642 16.5 11.25V8.75C16.5 8.33579 16.8358 8 17.25 8ZM3.5 8.75C3.5 8.33579 3.16421 8 2.75 8C2.33579 8 2 8.33579 2 8.75V11.25C2 11.6642 2.33579 12 2.75 12C3.16421 12 3.5 11.6642 3.5 11.25V8.75Z"/></svg>');
}
/* #endregion */