@mixin triangle-border($color, $orientation, $size) {
  border-width:
          if($orientation == top, 0, $size)
          if($orientation == right, 0, $size)
          if($orientation == bottom, 0, $size)
          if($orientation == left, 0, $size)
;

  border-color:
          if($orientation == bottom, $color, transparent)
          if($orientation == left, $color, transparent)
          if($orientation == top, $color, transparent)
          if($orientation == right, $color, transparent)
;

  #{$orientation}: -($size - .5px);
  @if ($orientation == top) or ($orientation == bottom) {
    left: 50%;
    transform: translateX(-50%);
  } @else {
    top: 50%;
    transform: translateY(-50%);
  }
}

@mixin triangle($orientation, $size, $color, $border: none) {
  background: $color;

  &::after {
    width: 0;
    height: 0;
    border-style: solid;
    content: "";
    position: absolute;

    @include triangle-border($color, $orientation, $size);
  }

  @if $border != none {
    &::before {
      width: 0;
      height: 0;
      border-style: solid;
      content: "";
      position: absolute;

      @include triangle-border($border, $orientation, $size + 1);
    }
  }
}

@mixin triangle-top($size, $color, $border: none)    { @include triangle(top, $size, $color, $border); }
@mixin triangle-bottom($size, $color, $border: none) { @include triangle(bottom, $size, $color, $border); }
@mixin triangle-left($size, $color, $border: none)   { @include triangle(left, $size, $color, $border); }
@mixin triangle-right($size, $color, $border: none)  { @include triangle(right, $size, $color, $border); }

.ui-popup {
  $arrow-base: 8px;
  $arrow-color: white;
  $arrow-border: rgba(black, 0.2);

  $popper-padding: .75rem;

  padding: $popper-padding;
  background: white;
  //border: 1px solid black;
  z-index: 1000;
  box-shadow: rgba(black, .7) 0 1px 3px;
  position: relative;
  box-sizing: content-box;

  max-width: 500px;
  min-width: 200px;

  border-radius: 2px;

  .ui-popup__arrow {
    position: absolute;
    width: 0;
    height: 0;
  }

  &.ui-popup--no-padding {
    padding: 0;
  }

  *.ui-popup__header {
    margin-bottom: 0.5rem;
  }

  .ui-popup__heading {
    font-size: $font-size-sm;
    font-weight: bold;
    margin-bottom: .5rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  @mixin placement($placement) {
    $opposite: (
            left: right,
            right: left,
            top: bottom,
            bottom: top
    );

    &[x-placement*="#{$placement}"] {
      margin-#{map-get($opposite, $placement)}: $arrow-base;

      .ui-popup__arrow {
        #{map-get($opposite, $placement)}: 0;
        @include triangle(map-get($opposite, $placement), $arrow-base, $arrow-color, $arrow-border);
      }
    }
  }

  @mixin arrows {
    @include placement("left");
    @include placement("right");
    @include placement("top");
    @include placement("bottom");
  }

  &.ui-popup--arrow {
    @include arrows;
  }

  &.ui-popup--tooltip {
    background: $dark;
    color: white;
    padding: .5rem .75rem;
    font-size: $small-font-size;
    font-weight: bold;
    min-width: 0;
    box-shadow: none;

    &.ui-popup--arrow {
      $arrow-color: $dark;
      $arrow-border: none;
      $arrow-base: 6px;

      @include arrows;

      .ui-popup__arrow::before {
        border: none;
      }
    }
  }
}

@include media-breakpoint-down('sm') {
  .ui-popup {
    margin-left: $spacer;
    margin-right: $spacer;
  }
}