@import '../../marketplace.css';

.root {
}

.content {
  display: flex;
  flex-direction: row;
}

.avatar {
  flex-shrink: 0;
  margin-right: 36px;
}

.info {
  flex: 1;
}

.heading {
  @apply --marketplaceH2FontStyles;
  margin: 20px 0 0 0;

  @media (--viewportMedium) {
    margin: 15px 0 0 0;
  }
}

.link {
  white-space: nowrap;
}

.mobileBio,
.desktopBio {
  /* Preserve newlines, but collapse other whitespace */
  white-space: pre-line;
  margin: 18px 0 0 0;
  transition: all 1s ease-in;
  @apply --marketplaceH4FontStyles;

  @media (--viewportMedium) {
    margin: 18px 0 0 0;
  }
}

.mobileBio {
  @media (--viewportMedium) {
    display: none;
  }
}

.desktopBio {
  display: none;

  @media (--viewportMedium) {
    display: block;
  }
}

.showMore {
  margin-left: 5px;
  @apply --marketplaceH4FontStyles;
}

.links {
  @apply --marketplaceH4FontStyles;
}

.withBioMissingAbove {
  @media (--viewportMedium) {
    /* Fix baseline alignment if bio is missing from above */
    margin-top: 18px;
  }
}

.linkSeparator {
  margin: 0 10px;
  color: var(--marketplaceColor);
}
