.chattigo-widget {
  background: use-color(base, 'white');
  box-shadow: $box-shadow-card-lvl-2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  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');
  // z-index: 50001;

  @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^='icon-'],
      [class*=' 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');
      // z-index: 1;
  
      @include media-breakpoint-up('webchat') {
        right: 40px;
      }
  
      [class^='icon-'],
      [class*=' icon-'] {
        @include use-font('body', 'regular');
        line-height: 21px;
      }
  
      &:hover {
        background-color: transparentize(use-color(base, 'black'), 0.4);
        text-decoration: none;
      }
    }
  }

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