.Contact {
  display: flex;
  align-items: center;
  padding: 0.25rem;

  &.interactive {
    cursor: var(--custom-cursor, pointer);
  }

  .Avatar {
    margin-right: 0.8125rem;
  }

  .contact-info {
    padding: 0.5rem;
    padding-left: 0;
    white-space: nowrap;
    overflow: hidden;

    .contact-name {
      font-size: 1rem;
      margin-bottom: 0.25rem;
      font-weight: 500;
    }

    .contact-phone {
      color: var(--secondary-color);
    }

    .contact-name,
    .contact-phone {
      line-height: 1rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}