@use "sass:math";
@use "../function";
@use "./shape" as *;

/*
---
name: balloon-triangle()
category:
  - core/mixin
---
Generate balloon triangle

### scss
```scss
//
// @param  string  $position
// @param  length  $size              triangle size
// @param  hex     $background-color
// @param  length  $border-size
// @param  hex     $border-color
//

@use "node_modules/sass-basis/src/css/core";

.c-foo {
  @include core.balloon-triangle(top, 10px, #fff, 1px, #ccc);
  position: relative;
  background-color: #fff;
  border: 1px solid #ccc;
}
```
*/

@mixin balloon-triangle($position, $size, $background-color, $border-size: null, $border-color: null) {
  $before: ($size * -1);
  $after: $before;

  @if (not function.is-null($border-size)) {
    $after: $after + $border-size + 1;
  }

  &::before, &::after {
    content: '';
    display: block;

    @if ('top' == $position or 'bottom' == $position) {
      margin-left: (math.div($size, 2) * -1);
    } @else if ('right' == $position or 'left' == $position) {
      margin-top: (math.div($size, 2) * -1);
    }
  }

  @if (not function.is-null($border-size) and not function.is-null($border-color)) {
    &::before {
      @if ('top' == $position) {
        position: absolute;
        top: $before;
        left: 50%;
        @include triangle-top($size, $size, $border-color);
      } @else if ('right' == $position) {
        position: absolute;
        top: 50%;
        right: $before;
        @include triangle-right($size, $size, $border-color);
      } @else if ('bottom' == $position) {
        position: absolute;
        bottom: $before;
        left: 50%;
        @include triangle-bottom($size, $size, $border-color);
      } @else if ('left' == $position) {
        position: absolute;
        top: 50%;
        left: $before;
        @include triangle-left($size, $size, $border-color);
      }
    }
  }

  &::after {
    @if ('top' == $position) {
      position: absolute;
      top: $after;
      left: 50%;
      @include triangle-top($size, $size, $background-color);
    } @else if ('right' == $position) {
      position: absolute;
      top: 50%;
      right: $after;
      @include triangle-right($size, $size, $background-color);
    } @else if ('bottom' == $position) {
      position: absolute;
      bottom: $after;
      left: 50%;
      @include triangle-bottom($size, $size, $background-color);
    } @else if ('left' == $position) {
      position: absolute;
      top: 50%;
      left: $after;
      @include triangle-left($size, $size, $background-color);
    }
  }
}