@mixin calc-arrow-pos($direction) {
  @if $direction == 'bottom' {
    left: calc(50% - 5px);

  } @else if $direction == 'left' {
    top: calc(50% - 5px);

  } @else if $direction == 'top' {
    left: calc(50% - 5px);

  } @else if $direction == 'right' {
    top: calc(50% - 5px);
  }
}

@mixin arrow-direction($direction){
  display: block;
  height: 0;
  width: 0;
  @include calc-arrow-pos($direction);

  @if $direction == 'bottom' {
    border-left-color: transparent;
    border-right-color: transparent;
    border-top: 0;
    margin-top: 0;
    margin-bottom: 0;

  } @else if $direction == 'left' {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right: 0;
    margin-left: 0;
    margin-right: 0;

  } @else if $direction == 'top' {
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;

  } @else if $direction == 'right' {
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

@mixin arrow-all-directions($color) {
  position: absolute;
  border: solid $color;

  &[data-placement^="bottom"] {
    @include arrow-direction(bottom)
  }

  &[data-placement^="top"] {
    @include arrow-direction(top)
  }

  &[data-placement^="left"] {
    @include arrow-direction(left)
  }

  &[data-placement^="right"] {
    @include arrow-direction(right)
  }
}