.str-chat {
  box-sizing: border-box;

  *,
  *::after,
  *::before {
    box-sizing: inherit;
    font-family: var(--second-font);
  }

  // Overriding styles of ngx-popperjs
  .ngxp__container {
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;

    .ngxp__arrow {
      display: none !important;
    }
  }

  // Quick fix for: https://github.com/tonysamperi/ngx-popperjs/issues/52
  &.google-chrome {
    popper-content {
      .ngxp__container {
        display: block !important;
        position: absolute;
        right: 0;
        bottom: 0;
        opacity: 0;

        &[aria-hidden="true"] {
          visibility: hidden;
        }
      }
    }
  }
}

.clearfix {
  clear: both;
}

.messenger-chat {
  &.str-chat {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-family: var(--second-font);
    height: 100vh;
    margin: 0;
    flex: 1 0 100%;

    .str-chat {
      &__container {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: row;
      }

      &__main-panel {
        width: 100%;
        min-width: 250px;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: var(--sm-p) var(--sm-p) 0 var(--xs-p);
      }
    }
  }
}

.str-chat {
  height: 100vh;
  font-family: var(--second-font);
  color: var(--black);

  &.dark {
    color: var(--white);
  }

  &.messaging,
  &.commerce {
    background-color: var(--grey-gainsboro);

    &.dark {
      background-color: var(--dark-grey);
    }
  }

  &.team {
    &.dark {
      background: var(--dark-grey);
    }
  }

  &.livestream {
    &.dark {
      background: var(--dark-grey);
    }
  }
}

.str-chat-channel-list {
  float: left;
}

.str-chat-channel {
  max-height: 100vh;

  .str-chat__container {
    height: 100%;
    display: flex;

    .str-chat__main-panel,
    .str-chat-angular__main-panel-inner {
      height: 100%;
      width: 100%;
      min-width: 250px;
      display: flex;
      flex-direction: column;
      flex: 1;

      &--hideOnThread {
        display: none;
      }
    }

    .rfu-dropzone {
      width: 100%;
    }
  }

  &.messaging {
    .str-chat__main-panel {
      padding: var(--sm-p) var(--xs-p) 0 0;
    }

    @media screen and (max-width: 960px) {
      .str-chat__main-panel {
        padding: var(--xxs-p) var(--xxs-p) 0;
      }
    }
  }

  &.team {
    .str-chat {
      &__container {
        display: flex;
      }
    }
  }

  &.commerce {
    .str-chat {
      &__main-panel {
        width: 100%;
      }

      &__container {
        background: var(--white95);
      }
    }

    &.dark {
      .str-chat__container {
        background: var(--dark-grey);
        box-shadow: 0 10px 31px 0 var(--black50);
      }
    }
  }
}

.str-chat.dark {
  .emoji-mart {
    background: var(--dark-grey);
    border: var(--dark-grey);
  }

  .emoji-mart-category-label span {
    background: var(--dark-grey);
    color: var(--white);
  }

  .emoji-mart-search {
    input {
      background: var(--dark-grey);
      color: var(--white);
    }

    button svg {
      fill: var(--white);
    }
  }
}

// Only in theme-v2
.str-chat__empty-channel {
  display: none;
}

// Fixes icon sizing problem in Angular SDK
stream-icon,
stream-icon-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
}