@charset "utf-8";

@use "sass:math";

@mixin balloonArrow(
  $width: 10px,
  $height: 5px,
  $color: #000,
  $position: bottom,
  $pseudo: "after"
) {
  position: relative;

  @if ($position == "top") {

    &:#{$pseudo} {
      border-color: transparent transparent $color transparent;
      border-width: 0 #{math.div($width, 2)}px #{$height}px #{math.div($width, 2)}px;
      left: calc(50% - #{math.div($width, 2)}px);
      top: -#{$height}px;
    }
  }

  @else if ($position == "right") {

    &:#{$pseudo} {
      border-color: transparent transparent transparent $color;
      border-width: #{math.div($width, 2)}px 0 #{math.div($width, 2)}px #{$height}px;
      right: -#{$height}px;
      top: calc(50% - #{math.div($width, 2)}px);
    }
  } @else if ($position == "bottom") {

    &:#{$pseudo} {
      border-color: $color transparent transparent transparent;
      border-width: #{$height}px #{math.div($width, 2)}px 0 #{math.div($width, 2)}px;
      bottom: -#{$height}px;
      left: calc(50% - #{math.div($width, 2)}px);
    }
  } @else if ($position == "left") {

    &:#{$pseudo} {
      border-color: transparent $color transparent transparent;
      border-width: #{math.div($width, 2)}px #{$height}px #{math.div($width, 2)}px 0;
      left: -#{$height}px;
      top: calc(50% - #{math.div($width, 2)}px);
    }
  }

  &:#{$pseudo} {
    border-style: solid;
    content: "";
    display: inline-block;
    height: 0;
    position: absolute;
    width: 0;
  }
}