@import url('http://fonts.lug.ustc.edu.cn/css?family=Open+Sans:400,300,700')

$family-sans: 'Open Sans',sans-serif

=font($size: 1em, $line-height: normal, $weight: normal, $family: 'sans')
  font-family: $family-sans
  font-size: $size
  font-weight: $weight
  line-height: $line-height

=tri($c: #2dd, $w:20px, $t: 0, $l: 0, $direction: "right")
  position: relative
  &:after
    content: ""
    position: absolute
    width: 0
    height: 0
    border: $w solid transparent
    border-top-color: $c
  @if $direction == "left"
    &:after
      +transform(translateX(-$w*2) translateY(-$w) rotate(90deg))
      left: $l
      right: auto
      top: $t
      -moz-backface-visibility: hidden
  @if $direction == "right"
    &:after
      +transform(translateX($w*2) translateY(-$w) rotate(-90deg))
      left: auto
      right: $l
      top: $t
  @if $direction == "top"
    &:after
      +transform(translateX(-$w) translateY(-$w*2) rotate(180deg))
      left: $l
      right: auto
      top: $t
  @if $direction == "bottom"
    &:after
      +transform(translateX(-$w) translateY($w*2) rotate(0))
      left: $l
      right: auto
      bottom: $l

      
      
=chat($colors: (#f6615b, adjust-hue(#f6615b, 100)), $w: 80px, $r: 6px)
  +clearfix
  position: relative
  .chat__item
    position: relative
    margin-top: 20px
    padding-left: $w + 20px
    &:first-child
      margin-top: 0px
    .chat__avatar
      +border-radius($w)
      overflow: hidden
      width: $w
      height: $w
      position: absolute
      top: 0
      left: 0
      img
        width: $w
        height: auto
    .chat__voice
      +border-radius($r)
      +tri(nth($colors, 1), 12px, $w/2, 0, 'left')
      +font(14px, 1.6em)
      background: nth($colors, 1)
      padding: 18px
      color: #fff
      min-height: $w - (18px * 2)
      .chat__voice-name,
      .chat__voice-date
        +font(12px, 1.6em)
        color: #fff
  .chat__item--right
    @extend .chat__item
    padding-left: 0
    padding-right: $w + 20px
    .chat__avatar
      left: auto
      right: 0
    .chat__voice
      +tri(nth($colors, 2), 12px, $w/2, 0, 'right')
      background: nth($colors, 2)


body
  padding: 50px 50px

.chat
  $colors: #f6615b, adjust-hue(#f6615b, 120)
  +chat($colors, 100px)