.chattigo-widget-header {
  color: use-color(base, true-white);
  display: flex;
  height: 52px;
  margin-bottom: 8px;
  padding: 16px 16px 0;

  @include media-breakpoint-up('webchat') {
    margin-bottom: 16px;
  }

  // welcome page components
  @include if-block-has-modifier('chattigo-widget', 'welcome') {
    color: use-color(base, true-white);
    display: block;
    height: auto;
    margin-bottom: 16px;
    padding: 64px 32px 0;

    @include element('logo') {
      fill: use-color(base, true-white);
      height: 44px;
      max-width: 230px;
      width: auto;
    }

    @include element('h3') {
      @include use-font('h3', 'bold');
      margin: 8px 0;
      overflow-wrap: break-word;
      text-align: left;
    }
    
    @include element('subheading') {
      @include use-font('subheading', 'regular');
      min-width: 280px;
      overflow-wrap: break-word;
      text-align: left;
    }

    @include media-breakpoint-up(phone-i) {
      padding: 64px 40px 0;
    }
  }
  
  @include if-block-has-modifier('chattigo-widget', 'ending') {
    color: use-color(base, true-white);
    display: block;
    height: auto;
    margin: 70px 0 4px;
    padding: 64px 32px 0;

    @include element('logo') {
      fill: use-color(base, true-white);
      height: 44px;
      max-width: 230px;
      width: auto;
    }

    @include element('h3') {
      @include use-font('h3', 'bold');
      margin: 8px 0;
      overflow-wrap: break-word;
      text-align: left;
    }
    
    @include element('subheading') {
      @include use-font('subheading', 'regular');
      min-width: 280px;
      overflow-wrap: break-word;
      text-align: left;
    }

    @include media-breakpoint-up(phone-i) {
      padding: 16px 40px 0;
    }
  }
  
  @include element('background') {
    background-color: use-color(secondary);
    background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
    background-position: 100% 132%, 0 0;
    background-repeat: no-repeat;
    background-size: 166px, 100%;
    height: 68px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: use-layer('behind');
    // z-index: -1;

    @include if-block-has-modifier('chattigo-widget', 'welcome') {
      background-color: use-color(secondary);
      background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
      background-position: 100% 0%, 0 0;
      background-repeat: no-repeat;
      background-size: 235px, 100%;
      height: 267px;
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: use-layer('behind');
      // z-index: -1;
  
      @include media-breakpoint-up(tablet) {
        border-radius: 8px 8px 0 0;
      }
    }
    
    @include if-block-has-modifier('chattigo-widget', 'ending') {
      background-color: use-color(secondary);
      background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
      background-position: 100% 0%, 0 0;
      background-repeat: no-repeat;
      background-size: 235px, 100%;
      height: 310px;
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: use-layer('behind');
      // z-index: -1;
  
      @include media-breakpoint-up(tablet) {
        border-radius: 8px 8px 0 0;
      }
    }
  }

  @include element('image') {
    border-radius: 50%;
    height: 36px;
    margin-right: 8px;
    width: 36px;
  }
  
  @include element('agent-info') {
    display: flex;
    flex-direction: column;
    max-width: 60%;
    
    @include modifier('name') {
      @include use-font('body', 'bold');
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @include modifier('status') {
      @include use-font('caption', 'regular');
      line-height: 12px;
    }
  }
  
  @include element('actions') {
    display: flex;
    margin-left: auto;
    margin-top: 6px;
    
    @include modifier('item') {
      color: use-color(base, true-white);
      cursor: pointer;
      margin: 0 8px;
      text-decoration: none;
      width: 24px;

      span {
        font-size: 24px !important;
      }

      &:last-child() {
        align-items: center;
        background-color: transparentize(use-color(base, 'black'), 0.8);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        margin-right: 0;
        margin-top: -6px;
        max-height: 20px;
        min-height: 20px;
        padding: 8px;
        width: 20px;

        span {
          font-size: 16px !important;
        }
      }
    }
  }

  @include modifier('fixed') {
    align-items: center;
    background-color: use-color(secondary);
    background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
    background-position: 100% 0%, 0 0;
    background-repeat: no-repeat;
    background-size: 235px, 155%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 16px 16px 16px 32px;
    position: fixed;
    width: inherit;
    z-index: use-layer('base');
    // z-index: 1;

    @include media-breakpoint-up(webchat) {
      border-radius: 8px 8px 0 0;
    }
  }
}