.chats-container {
  display: flex;
  flex-direction: column;

  .sidebar-content {
    width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    display: flex; /* idk why but need */
    position: relative;

    > div {
      width: 100%;
    }
  }

  #chats-container {
    max-height: 100%;
    overflow: hidden;
    position: relative;
  }

  #search-container, #chats-archived-container {
    display: none;
    width: 100%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    background: #fff;

    &.active {
      display: flex;
    }
  }

  .sidebar-header__btn-container {
    position: relative;
    width: 39.75px;
    height: 39px;

    > * {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      transition: .2s opacity;
      z-index: 2;

      &:before {
        transition: .2s transform;
        transform: rotate(180deg);
      }

      & + * {
        margin-left: 0!important;
      }

      &.active {
        //margin-top: 1px;
        opacity: 1;
        visibility: visible;
        color: #707579;

        &:before {
          transform: rotate(0deg);
        }
      }
    }
  }

  .sidebar-tools-button .btn-menu {
    width: 217px;

    .archived-count {
      border-radius: 12px;
      min-width: 24px;
      padding: 0 8px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      color: #fff;
      font-weight: 500;
      background-color: #c5c9cc;
      justify-self: flex-end;
      position: absolute;
      right: 16px;
    }

    .archived-count:empty {
      display: none;
    }
  }

  .search-group {
    width: 100%;
    border-bottom: 1px solid #DADCE0;
    padding: 1rem 0 .5rem;
    margin-bottom: .5rem;

    &__name {
      color: $color-gray;
      padding: 0 1.85rem;
      padding-bottom: 1rem;
    }
  }
}