.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;
      }
    }
  }
}