mezis/appfab

@import compass/css3/transform
@import application/variables

.with_bubbles
  $_background:    $wellBackground
  $_borderColor:   $_background
  // $_borderColor:   darken($_background, 5%)
  $shadow_radius:  6px
  $nose_size:      10px
  $shadow:         $standard_box_shadow
  $border:         1px solid $_borderColor

  .bubble
    background-color: $_background
    border-radius:    5px
    border:           $border
    box-shadow:       $shadow
    display:          block
    padding:          $section_padding ($section_padding * 1.5)
    margin:           1em ($shadow_radius + $nose_size)
    position:         relative
    vertical-align:   top

    .body
      &, & > .markdown
        > *:last-child
          margin-bottom: 0
        > *:first-child
          margin-top:    0

  .tail
    position: absolute
    height:  ($shadow_radius + $nose_size)
    width:   ($shadow_radius + $nose_size)
    overflow: hidden

    &:before
      border:            $border
      background-color:  $_background
      box-shadow:        $shadow
      content:           "\00a0"

      display:           block
      position:          absolute
      top:               0px
      height:            $nose_size
      width:             $nose_size

  .bubble.left
    text-align: left

    .tail
      top:      $nose_size
      left:   -($shadow_radius + $nose_size)

      &:before
        +transform(skewX(-45deg))
        left:              $nose_size

  .bubble.right
    text-align: right

    .tail
      top:      $nose_size
      right:   -($shadow_radius + $nose_size)

      &:before
        +transform(skewX(45deg))
        right:             $nose_size