{$class-baloon-wrapper}
  @extend $position-relative

{$class-baloon}
  @extend $invisible-xs
  min-width: $var-baloon-min-width unless $var-baloon-min-width is false or is-ident($var-baloon-min-width)
  max-width: $var-baloon-max-width unless $var-baloon-max-width is false or is-ident($var-baloon-max-width)
  opacity: 0 unless $var-baloon-transition is false
  transition: $var-baloon-transition unless $var-baloon-transition is false
  transform: translateY(35%) unless $var-baloon-transition is false
  {$class-baloon-wrapper} &
    @extend $level-300
    absolute: left 50%
    transform: translateX(-50%) translateY(35%) unless $var-baloon-transition is false
    width: 100%

{$class-baloon__triangle}
  @extend $align-center-xs, $block-xs
  line-height: 0
  &:before
    @extend $inline-block-xs
    border: $var-baloon__arrow-width solid transparent
    content: ''

{$class-baloon--bottom}
  border-width: $var-baloon-border-width unless $var-baloon-border-width is false or is-ident($var-baloon-border-width)
  {$class-baloon__triangle}
    &:before
      border-bottom-color: $c--blue
{$class-baloon--bottom}{$class-baloon--black} {$class-baloon__triangle}
  &:before
    border-bottom-color: $c--black
{$class-baloon--bottom}{$class-baloon--green} {$class-baloon__triangle}
  &:before
    border-bottom-color: $c--green
{$class-baloon--bottom}{$class-baloon--gray} {$class-baloon__triangle}
  &:before
    border-bottom-color: $c--gray
{$class-baloon--bottom}{$class-baloon--orange} {$class-baloon__triangle}
  &:before
    border-bottom-color: $c--orange
{$class-baloon--bottom}{$class-baloon--purple} {$class-baloon__triangle}
  &:before
    border-bottom-color: $c--purple
{$class-baloon--bottom}{$class-baloon--red} {$class-baloon__triangle}
  &:before
    border-bottom-color: $c--red
{$class-baloon--bottom}{$class-baloon--yellow} {$class-baloon__triangle}
  &:before
    border-bottom-color: $c--yellow

{$class-baloon__content}
  @extend $block-xs
  @extend $scheme--white
  border-bottom-left-radius: $var-baloon-border-radius unless $var-baloon-border-radius is false or is-ident($var-baloon-border-radius)
  border-bottom-right-radius: $var-baloon-border-radius unless $var-baloon-border-radius is false or is-ident($var-baloon-border-radius)
  box-shadow: $var-baloon-box-shadow unless $var-baloon-box-shadow is false or is-ident($var-baloon-box-shadow)
  border: $var-baloon__content-border-width solid $c--disabled-bright unless $var-baloon__content-border-width is false or is-ident($var-baloon__content-border-width)
  border-top-width: 0
  padding: $var-baloon-padding unless $var-baloon-padding is false or is-ident($var-baloon-padding)

{$class-baloon__header}
  @extend $scheme--blue
  @extend $block-xs
  border-top-left-radius: $var-baloon-border-radius unless $var-baloon-border-radius is false or is-ident($var-baloon-border-radius)
  border-top-right-radius: $var-baloon-border-radius unless $var-baloon-border-radius is false or is-ident($var-baloon-border-radius)
  padding: $var-baloon-padding unless $var-baloon-padding is false or is-ident($var-baloon-padding)
  {$class-baloon--gray} &
    @extend $scheme--gray
  {$class-baloon--black} &
    @extend $scheme--black
  {$class-baloon--green} &
    @extend $scheme--green
  {$class-baloon--orange} &
    @extend $scheme--orange
  {$class-baloon--purple} &
    @extend $scheme--purple
  {$class-baloon--red} &
    @extend $scheme--red
  {$class-baloon--yellow} &
    @extend $scheme--yellow

{$class-baloon--top}
  border-width: $var-baloon-border-width unless $var-baloon-border-width is false or is-ident($var-baloon-border-width)
  bottom: 100%
  {$class-baloon__triangle}
    &:before
    &:after
      margin-top: (- $var-baloon__content-border-width)
    &:before
      border-top-color: white
    &:after
      @extend $level-0
      @extend {$class-baloon__triangle}:before
      absolute: left 50%
      border-width: ($var-baloon__arrow-width + ($var-baloon__arrow-width * 0.2))
      border-top-color: rgba(black, .05)
      transform: translateX(-50%)
{$class-baloon--top}{$class-baloon--black} {$class-baloon__triangle}
  &:before
    border-top-color: $c--black
{$class-baloon--top}{$class-baloon--gray} {$class-baloon__triangle}
  &:before
    border-top-color: $c--gray
{$class-baloon--top}{$class-baloon--green} {$class-baloon__triangle}
  &:before
    border-top-color: $c--green
{$class-baloon--top}{$class-baloon--orange} {$class-baloon__triangle}
  &:before
    border-top-color: $c--orange
{$class-baloon--top}{$class-baloon--purple} {$class-baloon__triangle}
  &:before
    border-top-color: $c--purple
{$class-baloon--top}{$class-baloon--red} {$class-baloon__triangle}
  &:before
    border-top-color: $c--red
{$class-baloon--top}{$class-baloon--yellow} {$class-baloon__triangle}
  &:before
    border-top-color: $c--yellow

{$class-baloon--visible}
  @extend $visible-xs
  opacity: 1 unless $var-baloon-transition is false
  transform: translateY(0) unless $var-baloon-transition is false
  {$class-baloon-wrapper} &
    transform: translateX(-50%) translateY(0) unless $var-baloon-transition is false

{$class-baloon-wrapper}{$class-baloon-wrapper--onhover}:hover {$class-baloon}
  @extend {$class-baloon--visible}, {$class-baloon-wrapper} {$class-baloon--visible}