@mixin arrow-up($size, $color) {
  border-bottom: $size solid $color;
  border-left: $size solid transparent;
  border-right: $size solid transparent;
  border-top: 0;
}

@mixin arrow-down($size, $color) {
  border-bottom: 0;
  border-left: $size solid transparent;
  border-right: $size solid transparent;
  border-top: $size solid $color;
}

@mixin arrow-right($size, $color) {
  border-bottom: $size solid transparent;
  border-left: $size solid $color;
  border-right: 0;
  border-top: $size solid transparent;
}

@mixin arrow-left($size, $color) {
  border-bottom: $size solid transparent;
  border-left: 0;
  border-right: $size solid $color;
  border-top: $size solid transparent;
}

@mixin arrow-placements($arrow-size, $background-color) {
  &:after {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
  }

  &--top-left,
  &--top,
  &--top-right {
    margin-bottom: $arrow-size;

    &::after {
      @include arrow-down($arrow-size, $background-color);
      top: 100%;
    }
  }

  &--left-top,
  &--left,
  &--left-bottom {
    margin-right: $arrow-size;

    &::after {
      @include arrow-right($arrow-size, $background-color);
      left: 100%;
    }
  }

  &--right-top,
  &--right,
  &--right-bottom {
    margin-left: $arrow-size;

    &::after {
      @include arrow-left($arrow-size, $background-color);
      right: 100%;
    }
  }

  &--bottom-left,
  &--bottom,
  &--bottom-right {
    margin-top: $arrow-size;

    &::after {
      @include arrow-up($arrow-size, $background-color);
      bottom: 100%;
    }
  }

  &--top-left,
  &--bottom-left {
    &::after {
      left: 18px;
    }
  }

  &--top,
  &--bottom {
    &::after {
      left: 50%;
      margin-left: -$arrow-size;
    }
  }

  &--top-right,
  &--bottom-right {
    &::after {
      right: 18px;
    }
  }

  &--left-bottom,
  &--right-bottom {
    &::after {
      bottom: 8px;
    }
  }

  &--left,
  &--right {
    &::after {
      top: 50%;
      margin-top: -$arrow-size;
    }
  }

  &--left-top,
  &--right-top {
    &::after {
      top: 8px;
    }
  }
}