@mixin backdrop-transform-enter($placement) {
  $scale: 1;
  @if ($placement == 'top') {
    transform: scale($scale) translate(-50%, -55%);
  } @else if ($placement == 'bottom') {
    transform: scale($scale) translate(-50%, -45%);
  } @else if ($placement == 'left') {
    transform: scale($scale) translate(-50%, -50%);
  } @else if ($placement == 'right') {
    transform: scale($scale) translate(-50%, -50%);
  }
}

@mixin backdrop-transform-leave($placement) {
  $scale: 0.2;
  @if ($placement == 'top') {
    transform: scale($scale) translate(-50%, -45%);
  } @else if ($placement == 'bottom') {
    transform: scale($scale) translate(-50%, 0);
  } @else if ($placement == 'left') {
    transform: scale($scale) translate(-75%, -50%);
  } @else if ($placement == 'right') {
    transform: scale($scale) translate(-25%, -50%);
  }
}

@mixin arrow($placement, $width, $color) {
  @if ($placement == 'top') {
    border-width: $width $width 0;
    border-top-color: $color;
  } @else if ($placement == 'bottom') {
    border-width: 0 $width $width;
    border-bottom-color: $color;
  } @else if ($placement == 'left') {
    border-width: $width 0 $width $width;
    border-left-color: $color;
  } @else if ($placement == 'right') {
    border-width: $width $width $width 0;
    border-right-color: $color;
  }
}

@mixin arrow-position($placement, $width, $is-svg-arrow) {
  @if ($placement == 'top' and not $is-svg-arrow) {
    bottom: -$width;
  } @else if ($placement == 'bottom') {
    top: -$width;
  }

  @if ($is-svg-arrow) {
    @if ($placement == 'left') {
      right: -$width * 2 + 2px;
    } @else if ($placement == 'right') {
      left: -$width * 2 + 2px;
    } @else if ($placement == 'top') {
      bottom: -$width + 0.5px;
    }
  } @else {
    @if ($placement == 'left') {
      right: -$width;
    } @else if ($placement == 'right') {
      left: -$width;
    }
  }
}

@mixin arrow-margin($placement) {
  @if ($placement == 'top' or $placement == 'bottom') {
    margin: 0 3px;
  } @else {
    margin: 3px 0;
  }
}

@mixin svg-arrow-transform($placement) {
  @if ($placement == 'top') {
    transform: rotate(180deg);
  } @else if ($placement == 'left') {
    transform: rotate(90deg);
  } @else if ($placement == 'right') {
    transform: rotate(-90deg);
  }
}

@mixin arrow-transform-origin($placement, $size) {
  @if ($placement == 'top') {
    transform-origin: 50% 0%;
  } @else if ($placement == 'bottom') {
    transform-origin: 50% $size;
  } @else if ($placement == 'left') {
    transform-origin: 0% 50%;
  } @else if ($placement == 'right') {
    transform-origin: $size 50%;
  }
}

@mixin svg-arrow-transform-origin($placement, $size) {
  @if ($placement == 'top') {
    transform-origin: 50% 0%;
  } @else if ($placement == 'bottom') {
    transform-origin: 50% $size;
  } @else if ($placement == 'left') {
    transform-origin: 33.33333333% 50%;
  } @else if ($placement == 'right') {
    transform-origin: 66.66666666% 50%;
  }
}