.container
  background-color: white
  border: 1px solid #f0f0f0
  border-radius: 3px

.avatar
  width: 50px
  height: 50px
  line-height: 55px
  display: inline-block
  border-radius: 50%
  font-size: 22px
  color: white
  text-align: center
  font-weight: 500

.avatar--loading
  background: linear-gradient(to right, #fafafa, #ebebeb, #fafafa)
  background-size: 200px 640px
  animation-duration: 1.8s
  animation-fill-mode: both
  animation-direction: alternate
  animation-iteration-count: infinite
  animation-name: placeHolderShimmer
  animation-timing-function: linear

.info
  display: flex
  align-items: center
  padding: 18px

.info__button
  color: #848484
  font-size: 0.9em
  appeareance: none
  -webkit-appearance: none
  -moz-appearance: none
  padding: 0
  border: 0
  cursor: pointer

  span
    padding-right: 8px

  img
    display: inline-block
    vertical-align: middle
    width: 15px

.info__avatar
  width: 50px
  margin-right: 15px

.info__details
  flex: 1

.info__name
  font-weight: 500
  font-size: 17px

.info__no-name
  font-size: 17px
  color: #848484

.info__email, .info__submessage
  color: #848484

table
  font-size: 14px

th, td
  padding: 0

th
  font-weight: 500
  padding-right: 20px

.details
  border-top: 1px solid #f0f0f0
  padding: 18px
  background-color: #f3f3f3
  display: flex

.details__pane:first-child
  flex: 1

@keyframes placeHolderShimmer
  0%
    background-position: -80px 0

  100%
    background-position: 80px 0