.chattigo-widget-content

scss
.chattigo-widget {
  // for the main content in messages
  @include element('content') {
    box-sizing: border-box;
    height: auto;
    margin-bottom: 53px;
    overflow: scroll;
    -ms-overflow-style: none;
    overflow-x: hidden;
    position: relative;

    &::-webkit-scrollbar {
      width: 0;
    }

  }
  // for the box of new messages
  @include element('footer') {
    bottom: -1px;
    min-height: 70px;
    position: absolute;
    width: 100%;
  }
  // for the welcome layout
  &-content {
    @include if-block-has-modifier('chattigo-widget', 'welcome') {
      background: use-color(base, true-white);
      border-radius: 4px;
      box-shadow: $box-shadow-card-lvl-1;
      margin: 0 8px;
      width: auto;

      @include media-breakpoint-up('phone-i') {
        margin: 0 16px;
      }
    }
    
    @include if-block-has-modifier('chattigo-widget', 'ending') {
      background: use-color(base, true-white);
      border-radius: 4px;
      box-shadow: $box-shadow-card-lvl-1;
      margin: 0 8px;
      width: auto;

      @include media-breakpoint-up('phone-i') {
        margin: 0 16px;
      }
    }
  }
}

Content elements

.chattigo-widget-content - Este es el bloque que contiene todos los elementos que no son parte del header para la página de bienvenida.

 <div class="chattigo-widget-content">
  *
  *
  *
 </div>

.chattigo-widget__content - Este bloque es para todo el contenido fuera de la página de bienvenida del widget.

 <div class="chattigo-widget__content">
  *
  *
  *
 </div>

.chattigo-widget__footer - Este bloque esta hecho para contener el componente de envío de mensajes.

 <div class="chattigo-widget__footer">
  *
  *
  *
 </div>

Requires

@function use-color()