@context border-box {
  .gitter-hidden {
    display: none;
  }

  .gitter-icon {
    width: 22px;
    height: 22px;

    fill: currentColor;
  }

  /*
   * States:
   * `.is-collapsed`
   * `.is-loading`
   */
  .gitter-chat-embed {
    --background-color: #ffffff;

    z-index: 100;
    position: fixed;
    top: 0;
    left: 60%;
    bottom: 0;
    right: 0;

    display: flex;
    flex-direction: row;

    background-color: var(--background-color);
    border-left: 1px solid #333;
    box-shadow: -12px 0 18px 0 rgba(50, 50, 50, 0.3);

    transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7);

    &.is-collapsed:not(.is-loading) {
      transform: translateX(110%);
    }

    /* Add some "extension" so that there isn't a gap
     * when we translate(via animation) more than 100% */
    &:after {
      content: '';

      z-index: -1;
      position: absolute;
      top: 0;
      left: 100%;
      bottom: 0;
      right: -100%;

      background-color: var(--background-color);
    }

    @media (max-width: 1150px) {
      left: 45%;
    }
    @media (max-width: 944px) {
      left: 30%;
    }
    @media (max-width: 600px) {
      left: 15%;
    }
    @media (max-width: 500px) {
      left: 0;
      border-left: none;
    }

    & > iframe {
      flex: 1;
      width: 100%;
      height: 100%;

      border: 0;
    }

  }


  .gitter-chat-embed-loading-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    display: none;
    /* main axis */
    justify-content: center;
    /* cross axis */
    align-items: center;

    .is-loading & {
      display: flex;
    }
  }


  @svg svg-loading-indicator {
    viewBox: 0 0 1792 1792;
    fill: #3a3133;

    @path {
      d: M526 1394q0 53-37.5 90.5t-90.5 37.5q-52 0-90-38t-38-90q0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm498 206q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-704-704q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5t-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-964-996q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zm1170 498q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5 37.5-90.5 90.5-37.5 90.5 37.5 37.5 90.5zm-640-704q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm530 206q0 93-66 158.5t-158 65.5q-93 0-158.5-65.5t-65.5-158.5q0-92 65.5-158t158.5-66q92 0 158 66t66 158z;
    }
  }

  .gitter-chat-embed-loading-indicator {
    opacity: 0.75;
    background-image: svg(svg-loading-indicator);

    animation: spin 2s infinite linear;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359.9deg);
    }
  }


  .gitter-chat-embed-action-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: flex-end;

    padding-bottom: 0.7em;

    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%);

  }

  .gitter-chat-embed-action-bar-item {
    display: flex;
    /* main axis */
    justify-content: center;
    /* cross axis */
    align-items: center;

    width: 40px;
    height: 40px;

    padding-left: 0;
    padding-right: 0;

    opacity: 0.65;
    background: none;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    border: 0;
    outline: none;

    cursor: pointer;
    cursor: hand;

    transition: all 0.2s ease;

    &:hover,
    &:focus {
      opacity: 1;
    }

    &:active {
      filter: hue-rotate(80deg) saturate(150);
    }
  }

  @svg svg-pop-out-icon {
    viewBox: 0 0 200 171.429;
    fill: #3a3133;

    @path {
      d: M157.143,103.571v35.714c0,8.854-3.144,16.426-9.431,22.713s-13.858,9.431-22.712,9.431H32.143 c-8.854,0-16.425-3.144-22.712-9.431S0,148.14,0,139.285V46.429c0-8.854,3.144-16.425,9.431-22.712 c6.287-6.287,13.858-9.431,22.712-9.431h78.572c1.041,0,1.896,0.335,2.566,1.004c0.67,0.67,1.004,1.525,1.004,2.567V25 c0,1.042-0.334,1.897-1.004,2.567c-0.67,0.67-1.525,1.004-2.566,1.004H32.143c-4.911,0-9.115,1.749-12.612,5.246 s-5.246,7.701-5.246,12.612v92.856c0,4.911,1.749,9.115,5.246,12.612s7.701,5.245,12.612,5.245H125c4.91,0,9.115-1.748,12.611-5.245 c3.497-3.497,5.246-7.701,5.246-12.612v-35.714c0-1.042,0.334-1.897,1.004-2.567c0.67-0.669,1.525-1.004,2.567-1.004h7.143 c1.042,0,1.897,0.335,2.567,1.004C156.809,101.674,157.143,102.529,157.143,103.571z M200,7.143v57.143 c0,1.935-0.707,3.609-2.121,5.022c-1.413,1.414-3.088,2.121-5.021,2.121c-1.935,0-3.609-0.707-5.022-2.121l-19.644-19.643 l-72.767,72.769c-0.744,0.744-1.6,1.115-2.567,1.115s-1.823-0.371-2.567-1.115L77.567,109.71c-0.744-0.744-1.116-1.6-1.116-2.567 c0-0.967,0.372-1.822,1.116-2.566l72.768-72.768l-19.644-19.643c-1.413-1.414-2.12-3.088-2.12-5.022c0-1.935,0.707-3.609,2.12-5.022 C132.105,0.707,133.779,0,135.715,0h57.143c1.934,0,3.608,0.707,5.021,2.121C199.293,3.534,200,5.208,200,7.143z;
    }
  }

  .gitter-chat-embed-action-bar-item-pop-out {
    margin-right: -4px;
    background-image: svg(svg-pop-out-icon);
  }

  @svg svg-collapse-icon {
    viewBox: 0 0 171.429 171.429;
    fill: #3a3133;

    @path {
      d: M122.433,106.138l-16.295,16.295c-0.744,0.744-1.6,1.116-2.566,1.116c-0.968,0-1.823-0.372-2.567-1.116l-15.29-15.29 l-15.29,15.29c-0.744,0.744-1.6,1.116-2.567,1.116s-1.823-0.372-2.567-1.116l-16.294-16.295c-0.744-0.744-1.116-1.6-1.116-2.566 c0-0.968,0.372-1.823,1.116-2.567l15.29-15.29l-15.29-15.29c-0.744-0.744-1.116-1.6-1.116-2.567s0.372-1.823,1.116-2.567 L65.29,48.996c0.744-0.744,1.6-1.116,2.567-1.116s1.823,0.372,2.567,1.116l15.29,15.29l15.29-15.29 c0.744-0.744,1.6-1.116,2.567-1.116c0.967,0,1.822,0.372,2.566,1.116l16.295,16.294c0.744,0.744,1.116,1.6,1.116,2.567 s-0.372,1.823-1.116,2.567l-15.29,15.29l15.29,15.29c0.744,0.744,1.116,1.6,1.116,2.567 C123.549,104.539,123.177,105.394,122.433,106.138z M146.429,85.714c0-11.012-2.717-21.168-8.148-30.469 s-12.797-16.667-22.098-22.098S96.726,25,85.714,25s-21.168,2.716-30.469,8.147S38.579,45.945,33.147,55.246S25,74.703,25,85.714 s2.716,21.168,8.147,30.469s12.797,16.666,22.098,22.098s19.457,8.148,30.469,8.148s21.168-2.717,30.469-8.148 s16.666-12.797,22.098-22.098S146.429,96.726,146.429,85.714z M171.429,85.714c0,15.551-3.832,29.893-11.496,43.024 c-7.664,13.133-18.062,23.53-31.194,31.194c-13.132,7.664-27.474,11.496-43.024,11.496s-29.892-3.832-43.024-11.496 c-13.133-7.664-23.531-18.062-31.194-31.194C3.832,115.607,0,101.265,0,85.714S3.832,55.822,11.496,42.69 c7.664-13.133,18.062-23.531,31.194-31.194C55.822,3.832,70.164,0,85.714,0s29.893,3.832,43.024,11.496 c13.133,7.664,23.53,18.062,31.194,31.194C167.597,55.822,171.429,70.164,171.429,85.714z;
    }
  }

  .gitter-chat-embed-action-bar-item-collapse-chat {
      background-image: svg(svg-collapse-icon);
  }



  .gitter-open-chat-button {
    z-index: 100;
    position: fixed;
    bottom: 0;
    right: 10px;

    padding: 1em 3em;

    background-color: #36bc98;
    border: 0;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;

    color: #ffffff;
    font-family: sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    cursor: hand;

    transition: all 0.3s ease;

    &:visited {
      color: #ffffff;
    }

    &:hover,
    &:focus {
      background-color: #3ea07f;
      color: #ffffff;
    }
    &:focus {
      box-shadow: 0 0 8px rgba(62, 160, 127, 0.6);

      outline: none;
    }

    &:active {
      color: #eeeeee;
    }

    &.is-collapsed {
      transform: translateY(120%);
    }

  }
}