// +balloon-tale(top red 12px 16px 1px, null, null)
=balloon-tale($tale, $tale-position-manual: null, $tale-border: null)
  // $tale
  $tale-direction: optional_nth($tale, 1)
  $tale-color: optional_nth($tale, 2)
  $tale-width: optional_nth($tale, 3)
  $tale-height: optional_nth($tale, 4)
  $parent-boder-width: optional_nth($tale, 5, 0)
  //$tale-position-manual
  $tale-position-manual-direction1: optional_nth($tale-position-manual, 1)
  $tale-position-manual-value1: optional_nth($tale-position-manual, 2)
  $tale-position-manual-direction2: optional_nth($tale-position-manual, 3)
  $tale-position-manual-value2: optional_nth($tale-position-manual, 4)
  //$tale-border
  $tale-border-color: optional_nth($tale-border, 1)
  $tale-border-width: optional_nth($tale-border, 2)
  &:#{if($tale-border, after, before)}
    position: absolute
    content: ""
    display: block
    +border(all, solid transparent)
    +border(horizontal, $tale-width)
    +border(vertical, $tale-height)
    +border(reverse($tale-direction), $tale-color)
    @if position_vertical($tale-direction)
      // 矢印の向きが上下
      @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_vertical($tale-position-manual-direction1))
        // manual が 一つだけ指定 上下方向 の場合
        left: 50%
        +rem('margin-left', $tale-width*-1)
      @if $tale-direction == top
        +rem($tale-direction, $tale-height*-1*2 + $parent-boder-width)
      @else
        +rem($tale-direction, $tale-height*-1*2 + $parent-boder-width*2)
      @if $tale-position-manual
        $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2)
        @each $key, $value in $tale-position-manuals
          @if position_horizontal($key)
            // manual が left or right の場合
            +rem($key, $value - if($tale-border, 0, $parent-boder-width))
          @else if $tale-direction == $key
            // 矢印の向きと manual で指定する方向が同じ場合
            +rem($key, $value - $tale-height - if($tale-border, 0, $parent-boder-width))
          @else if reverse($tale-direction) == $key
            // 上向き矢印 で manual が bottom の場合 or 下向き矢印 で manual が top の場合
            +rem($key, $value - if($tale-border, 0, $parent-boder-width))
    @if position_horizontal($tale-direction)
      // 矢印の向きが左右
      @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_horizontal($tale-position-manual-direction1))
        // manual が 一つだけ指定 上下方向 の場合
        top: 50%
        +rem('margin-top', $tale-height*-1)
      +rem($tale-direction, $tale-width*-1*2 - if($tale-border, 0, $parent-boder-width))
      @if $tale-position-manual
        $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2)
        @each $key, $value in $tale-position-manuals
          @if position_vertical($key)
            // manual が top or bottom の場合
            +rem($key, $value)
          @else if $tale-direction == $key
            // 矢印の向きと manual で指定する方向が同じ場合
            +rem($key, $value - $tale-width - if($tale-border, 0, $parent-boder-width))
          @else if reverse($tale-direction) == $key
            // 左向き矢印 で manual が right の場合 or 右向き矢印 で manual が left の場合
            +rem($key, $value - if($tale-border, 0, $parent-boder-width))

  @if $tale-border
    // tale border があるとき - 以下 tale-border の設定
    &:before
      position: absolute
      content: ""
      display: block
      +border(all, solid transparent)
      +border(horizontal, $tale-width + $tale-border-width)
      +border(vertical, $tale-height + $tale-border-width)
      +border(reverse($tale-direction), $tale-border-color)
      @if position_vertical($tale-direction)
        // 矢印の向きが上下
        @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_vertical($tale-position-manual-direction1))
          // manual が 一つだけ指定 上下方向 の場合
          left: 50%
          +rem('margin-left', $tale-width*-1 - $tale-border-width)
        @if $tale-direction == top
          +rem($tale-direction, $tale-height*-1*2 - $tale-border-width*1.5)
        @else
          +rem($tale-direction, $tale-height*-1*2 - $tale-border-width)
        @if $tale-position-manual
          $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2)
          @each $key, $value in $tale-position-manuals
            @if position_horizontal($key)
              // manual が left or right の場合
              +rem($key, $value - $tale-border-width)
            @else if $tale-direction == $key
              // 矢印の向きと manual で指定する方向が同じ場合
              +rem($key, $value - $tale-height - $tale-border-width*2)
            @else if reverse($tale-direction) == $key
              // 上向き矢印 で manual が bottom の場合 or 下向き矢印 で manual が top の場合
              +rem($key, $value)
      @if position_horizontal($tale-direction)
        // 矢印の向きが左右
        @if not $tale-position-manual or (length($tale-position-manual) == 2 and position_horizontal($tale-position-manual-direction1))
          // manual が 一つだけ指定 上下方向 の場合
          top: 50%
          +rem('margin-top', $tale-height*-1 - $tale-border-width)
        +rem($tale-direction, $tale-width*-1*2 - $tale-border-width*2)
        @if $tale-position-manual
          $tale-position-manuals: ($tale-position-manual-direction1: $tale-position-manual-value1, $tale-position-manual-direction2: $tale-position-manual-value2)
          @each $key, $value in $tale-position-manuals
            @if position_vertical($key)
              // manual が top or bottom の場合
              +rem($key, $value - $tale-border-width)
            @else if $tale-direction == $key
              // 矢印の向きと manual で指定する方向が同じ場合
              +rem($key, $value - $tale-width - $tale-border-width*2)
            @else if reverse($tale-direction) == $key
              // 左向き矢印 で manual が right の場合 or 右向き矢印 で manual が left の場合
              +rem($key, $value)