.chattigo-widget-trigger {
  background-image: use-color(gradients, balanced);
  border-radius: 50%;
  bottom: 16px;
  cursor: pointer;
  height: 60px;
  position: fixed;
  right: 24px;
  text-align: center;
  width: 60px;
  z-index: use-layer('widget-trigger');
  // z-index: 50000;

  @include modifier('complete') {
    background-image: none;
  @include element('logo') {
    height: 33px;
    position: absolute;
    right: 13px;
    top: 12px;
    width: 33px;

    @include if-block-has-modifier('chattigo-widget-trigger', 'complete') {
      bottom: 0;
      height: auto;
      max-height: 122px;
      max-width: 100vw;
      position: absolute;
      right: 0;
      top: auto;
      width: auto;

  @include media-breakpoint-up('webchat') {
    display: block;

Estructura y clases para el gatillador del widget de chattigo.


<!-- this div is just for the example -->
<div class="u-widget-trigger-example-margin"> 
  <!-- component -->
  <div class="chattigo-widget-trigger">
    <img class="chattigo-widget-trigger__logo" src="https://cdn.chattigo.com/assets/img/isotipo-grey.svg" />
  <!-- end component -->
html trigger complete
<!-- this div is just for the example -->
<div style="margin: 20px auto;min-height: 100px;"> 
  <!-- component -->
  <div class="chattigo-widget-trigger chattigo-widget-trigger--complete">
    <img class="chattigo-widget-trigger__logo" src="https://cdn.chattigo.com/assets/img/trigger/robot.gif" />
  <!-- end component -->


@function use-color()

@mixin modifier()