.chattigo-widget

scss
.chattigo-widget {
  background: use-color(base, 'white');
  box-shadow: $box-shadow-card-lvl-2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: $font-family-primary;
  height: 100%;
  overflow: hidden;
  -ms-overflow-style: none;  /* IE 10+ */
  overflow-y: scroll;
  padding: 0 0 16px;
  position: fixed;
  scrollbar-width: none; /* Firefox */
  top: 0;
  width: 100%;
  z-index: use-layer('widget');

  @include if-block-has-modifier('chattigo-widget', 'welcome', true) {
    @include media-breakpoint-up(webchat) {
      border-radius: 8px;
      bottom: 16px;
      height: auto;
      max-height: 75vh;
      position: fixed;
      right: 24px;
      top: auto;
      width: 376px;
    }

    &::-webkit-scrollbar {
      background: transparent;
      display: none;
      height: 0;
      width: 0;
    }
  }
  
  @include if-block-has-modifier('chattigo-widget', 'ending', true) {
    @include media-breakpoint-up(webchat) {
      border-radius: 8px;
      bottom: 16px;
      height: auto;
      max-height: 75vh;
      position: fixed;
      right: 24px;
      top: auto;
      width: 376px;
    }

    &::-webkit-scrollbar {
      background: transparent;
      display: none;
      height: 0;
      width: 0;
    }
  }

  @include media-breakpoint-up(webchat) {
    border-radius: 8px;
    bottom: 16px;
    height: 75vh;
    position: fixed;
    right: 24px;
    top: auto;
    width: 376px;
  }

  @include element('close-icon') {
    box-sizing: content-box;
    text-decoration: none;

    @include if-block-has-modifier('chattigo-widget', 'welcome') {
      background-color: transparentize(use-color(base, 'black'), 0.8);
      border-radius: 8px;
      color: use-color(base, true-white) !important;
      cursor: pointer;
      display: flex;
      height: 20px;
      justify-content: center;
      padding: 8px;
      position: fixed;
      right: 16px;
      text-align: center;
      width: 20px;
      z-index: use-layer('base');
  
      @include media-breakpoint-up('webchat') {
        right: 40px;
      }
  
      [class^='chattigo-icon-'],
      [class*=' chattigo-icon-'] {
        @include use-font('body', 'regular');
        line-height: 21px;
      }
  
      &:hover {
        background-color: transparentize(use-color(base, 'black'), 0.4);
        text-decoration: none;
      }
    }
    
    @include if-block-has-modifier('chattigo-widget', 'ending') {
      background-color: transparentize(use-color(base, 'black'), 0.8);
      border-radius: 8px;
      color: use-color(base, true-white) !important;
      cursor: pointer;
      display: flex;
      height: 20px;
      justify-content: center;
      padding: 8px;
      position: fixed;
      right: 16px;
      text-align: center;
      width: 20px;
      z-index: use-layer('base');
  
      @include media-breakpoint-up('webchat') {
        right: 40px;
      }
  
      [class^='chattigo-icon-'],
      [class*=' chattigo-icon-'] {
        @include use-font('body', 'regular');
        line-height: 21px;
      }
  
      &:hover {
        background-color: transparentize(use-color(base, 'black'), 0.4);
        text-decoration: none;
      }
    }
  }

  ul {
    padding-left: 0;
  }
  
  a {
    cursor: pointer;
  }

  &::-webkit-scrollbar {
    background: transparent;
    display: none;
    height: 0;
    width: 0;
  }
}

Estructura y clases para la implementación del widget de chattigo

Todas las clases descritas en esta sección deben estar contenidas dentro de la clase .chattigo-widget.*

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

Para la pantalla de bienvenida agregar el modificador en la clase padre.

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

Close Icon

.chattigo-widget__close-icon - Este elemento esta creado para ser usado en la pantalla de bienvenida para que se muestre un icono para cerrar el widget.
(se oculta para resoluciones mayores)

<a class="chattigo-widget__close-icon">
  <span class="icon-close"></span>
</a>

Requires

@function use-color()

@mixin element()

@mixin use-font()