.conversation-item {
  @apply relative my-1 flex items-center rounded-md p-2 hover:bg-[var(--primary-active)];

  &-pined {
    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      border: 4px solid;
      border-color: var(--primary) var(--primary) transparent transparent;
    }
  }

  :global(.emojione) {
    width: 16px;
    height: 16px;
  }
}
