@import ../../vendor/lib

// -------------------------------------
// UserStats

.UserStats dl
  display: inline-block
.UserStats dl + dl
  margin-left: 8%

.UserStats dt
  +sans-bold-family

.UserStats dd
  display: block
  transition: color $speed ease
  border-bottom: 1px solid
  color: #999
  line-height: 1

.UserStatsLink.active dd,
.no-touch .UserStatsLink:not(.asDisabled):hover dd
  color: black

// Temporary disable a few of these buttons
.UserStatsLink.asDisabled
  pointer-events: none !important

// -------------------------------------
// UserNames

.UserName,
.UserUsername
  +ellipse

.UserUsername
  font-size: rem(18)

.no-touch .UserUsername > a:hover
  color: #666

.UserName
  color: #999

@media(min-width: #{$break-2})
  .UserUsername
    font-size: rem(24)


// -------------------------------------
// UserInfo

.UserExternalLinks
  margin-left: rem(-10)
  color: #999
  word-wrap: break-word

.UserExternalLinks > a
  margin-left: rem(10)

.no-touch .UserExternalLinks > a:hover
  color: black


@import ../../vendor/lib

// -------------------------------------
// UserStats

.UserStats dl
  display: inline-block
.UserStats dl + dl
  margin-left: 8%

.UserStats dt
  +sans-bold-family

.UserStats dd
  display: block
  transition: color $speed ease
  border-bottom: 1px solid
  color: #999
  line-height: 1

.UserStatsLink.active dd,
.no-touch .UserStatsLink:not(.asDisabled):hover dd
  color: black

// Temporary disable a few of these buttons
.UserStatsLink.asDisabled
  pointer-events: none !important

// -------------------------------------
// UserNames

.UserName,
.UserUsername
  +ellipse

.UserUsername
  font-size: rem(18)

.no-touch .UserUsername > a:hover
  color: #666

.UserName
  color: #999

@media(min-width: #{$break-2})
  .UserUsername
    font-size: rem(24)


// -------------------------------------
// UserInfo

.UserShortBio
  word-break: break-word

// -------------------------------------
// UserInfo

.UserExternalLinks
  margin-left: rem(-10)
  color: #999
  word-wrap: break-word

.UserExternalLinks > a
  margin-left: rem(10)

.no-touch .UserExternalLinks > a:hover
  color: black


Add word wrapping for long Bios without a space
Add word wrapping for long Bios without a space

[Finishes: #119014219](https://www.pivotaltracker.com/story/show/119014219)