text: @import "variables.scss";
  @import "common.scss";
  @import "animation.scss";
  .#{$namespace}markdown {
      p {
          margin: 10px;
      }
  }
  
  .#{$namespace}widget-container {
    
    .#{$namespace}conversation-container{
        @media screen and (min-width: 800px){
            margin-bottom: 10px;
        }
    
        ul {
            padding-left: 10px;
            list-style: disc;
        }
    }
  
  }
  
  .#{$namespace}widget-embedded .#{$namespace}conversation-container ul {
    padding-left: 10px;
    list-style: disc;
  }
  
  
  .#{$namespace}launcher {
    @include animation(0, 0.5s, slide-in);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $tertiary;
    border: 0;
    border-radius: 50%;
    box-shadow: 0px 2px 10px 1px $grey-3;
    height: 60px;
    margin: 0;
    width: 60px;
    box-sizing: border-box;
  
    &:focus {
      outline: none;
    }
    
    &.#{$namespace}hide {
      display: none
    }
  
    &.#{$namespace}full-screen {
      @include launcher-fs;
    }
    
    img {
      width: 70%;
      max-height: 70%;
      object-fit: contain;
    }
  
    .#{$namespace}unread-count-pastille {
      background-color: #e41c23;
      color: white;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      position: absolute;
      top: 0;
      right: 0;
      font-weight: 700;
    }
  
    .#{$namespace}tooltip-body {
      background-color: white;
      box-sizing: border-box;
      border-radius: 8px;
      position: absolute;
      right: 78px;
      bottom: 12px;
      box-shadow:
      0 0.9px 1.4px -4px rgba(0, 0, 0, 0.042),
      0 2.3px 3.3px -4px rgba(0, 0, 0, 0.061),
      0 4.7px 6.3px -4px rgba(0, 0, 0, 0.075),
      0 9px 11.2px -4px rgba(0, 0, 0, 0.089),
      0 18.2px 20.9px -4px rgba(0, 0, 0, 0.108),
      0 50px 50px -4px rgba(0, 0, 0, 0.15)
    ;
    
      width: 320px;
      font-size: 16px;
      padding: 0px 8px;
      line-height: 19px;
      font-family: $fontfamily;
      animation: slideUp 0.3s ease-in-out;
      transition: all 0.2s ease-in-out;
  
      @media screen and (max-width: 800px){
        right: 74px;
        width: calc(100vw - 90px);
      }
  
      &:hover {
        background-color: rgb(250, 250, 250);
        transform: translateY(-2px);
        box-shadow:
    0 0.9px 2.1px -4px rgba(0, 0, 0, 0.056),
    0 2.3px 5.1px -4px rgba(0, 0, 0, 0.081),
    0 4.7px 9.6px -4px rgba(0, 0, 0, 0.1),
    0 9px 17.2px -4px rgba(0, 0, 0, 0.119),
    0 18.2px 32.2px -4px rgba(0, 0, 0, 0.144),
    0 50px 77px -4px rgba(0, 0, 0, 0.2)
  ;
  
        cursor: pointer;
        .#{$namespace}tooltip-decoration {
          background: rgb(250, 250, 250);
        }
        .#{$namespace}tooltip-close button {
          background-color: rgb(250, 250, 250);
        }
      }
  
      &[data-popper-placement=right] {
        margin-left: 20px;
        .#{$namespace}tooltip-decoration {
          left: -6px;
          clip-path: polygon(0% 50%, 50% 0, 50% 100%);
          -webkit-clip-path: polygon(0% 50%, 50% 0, 50% 100%);
        }
      }
      &[data-popper-placement=left] {
        margin-right: 20px;
        .#{$namespace}tooltip-decoration {
          right: -6px;
          clip-path: polygon(100% 50%, 50% 0, 50% 100%);
          -webkit-clip-path: polygon(100% 50%, 50% 0, 50% 100%);
        }
      }
  
      &[data-popper-placement=bottom] {
        margin-top: 20px;
        .#{$namespace}tooltip-decoration {
          top: -6px;
          clip-path: polygon(100% 50%, 0 50%, 50% 0);
          -webkit-clip-path: polygon(100% 50%, 0 50%, 50% 0);
        }
      }
  
      &[data-popper-placement=top] {
        margin-bottom: 20px;
        .#{$namespace}tooltip-decoration {
          bottom: -6px;
          clip-path: polygon(100% 50%, 0 50%, 50% 100%);
          -webkit-clip-path: polygon(100% 50%, 0 50%, 50% 100%);
        }
      }
  
      .#{$namespace}image-details {
        object-fit: scale-down;
        max-width: 100%;
        margin-top: 8px;
        margin-bottom: 2px;
      }
      .#{$namespace}replies {
        @include replies;
        justify-content: flex-end;
        margin-left: 4px;
      }
  
      .#{$namespace}separator {
       width:calc(100% + 16px);
       position:relative;
       left:-8px;
       height: 1px;
       background-color: #e0e0e0
      }
      
      .#{$namespace}reply {
        @include reply;
      }
  
      .#{$namespace}response {
        text-align: left;
        margin-left: 10px;
        margin-right: 10px;
        ul {
          margin-top: 1em;
          margin-bottom: 1em;
          padding-left: 40px;
        }
      }
      .#{$namespace}image-frame {
        object-position: 0 0;
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 9px;
      }
    }
    .#{$namespace}tooltip-decoration {
      position: absolute;
      bottom: 12px;
      right: -6px;
      background: white;
      height: 12px;
      width: 12px;
      transition: all 0.2s ease-in-out;
      clip-path: polygon(100% 50%, 50% 0, 50% 100%);
      -webkit-clip-path: polygon(100% 50%, 50% 0, 50% 100%);
    }
  
    .slick-dots li {
      width: 9px;
    }
    
    .slick-arrow {
      width: 15px;
      &.slick-next {
        right: -17px;
        top: initial;
        bottom: 10px;
        &:before {
          color: #c0c0c0
        }
      }
      &.slick-prev {
        left: -19px;
        top: initial;
        bottom: 10px;
        &:before {
          color: #c0c0c0;
        }
        
      }
    }
  
    .#{$namespace}slider-safe-zone {
      width: 87%;
      position: relative;
      margin-bottom: 32px;
      left: 18px;
      .slick-list {
        .#{$namespace}tooltip-response {
          max-height: unquote("min(60vh, 350px)");
          overflow-y: auto;
        }
      }
    }
  
    .#{$namespace}tooltip-response {
      margin-top:1.5rem;
      outline: none;
    }
  
    .#{$namespace}tooltip-close {
      position: absolute;
      right: 7px;
      top: 3px;
      color: red;
      height: 15px;
      width: 15px;
      transition: all 0.2s ease-in-out;
      button{
        transition: all 0.2s ease-in-out;
        // or else the default background color for a button on MOBILE is grey.
        background-color: transparent;
        cursor: pointer;
        border: none;
        padding: 0;
      }
    }
  }
  
  @keyframes slideUp {
    from {opacity: 0; transform: translateY(8px);}
    to {opacity: 1; transform: translateY(0);}
  }
  
  .#{$namespace}open-launcher {
    @include animation(0, 0.5s, rotation-rl);
  }
  
  .#{$namespace}close-launcher {
    &.#{$namespace}default {
      width: 20px !important;
    }
    @include animation(0, 0.5s, rotation-lr);
  }
  
  
  @media screen and (max-width: 800px) {
    .#{$namespace}hide-sm {
      display: none;
    }
  }
  