index.module.scss

@import 'assets/scss/fonts.scss';
@import 'assets/scss/colors.scss';

.container {
  display: flex;
  height: 65px;
  align-items: center;
  border-bottom: 1px solid var(--color-toggle-grey);

  &:hover {
    cursor: pointer;
    background: var(--color-background-blue);
  }
}

.itemSelected {
  background: var(--color-background-blue);
}

.avatarDisplayName {
  display: flex;
  align-items: center;
  width: 35%;
  margin-left: 32px;
  span {
    @include font-base;
    color: var(--color-text-gray);
  }
  img {
    width: 30px;
    height: 30px;
    margin-right: 12px;
  }
}

.conversationChannels {
  display: flex;
  align-items: center;
  width: 55%;
  z-index: 1;
  svg {
    height: 27px;
    width: 27px;
    margin-right: 2px;
    &:hover {
      opacity: 0.3;
    }
  }
}

.manageContainer {
  display: flex;
  width: 10%;
  justify-content: center;
  z-index: 1;

  svg {
    height: 18px;
    color: var(--color-text-gray);
    margin-left: 6px;
    margin-right: 6px;

    &:hover {
      color: var(--color-airy-blue);
    }
  }
}

.noResults {
  color: var(--color-text-gray);
}