/*------------------------------------------------------------
TOOLTIP
====================================*/

/* Variables Custom */
$tooltip-border-width: 0.1rem;
$tooltip-border-color: $gray-300;
$tooltip-text-align: left;
/***************************************/

.tooltip-inner {
  text-align: $tooltip-text-align;
}

@if($tooltip-border-width!=null) {
  .tooltip {
    .arrow {
      &::before {
        z-index: 1;
      }
      &::after {
        position: absolute;
        content: "";
        border-color: transparent;
        border-style: solid;
      }
    }
  }

  .tooltip-inner {
    border: $tooltip-border-width solid $tooltip-border-color;
  }

  // top / bottom
  .bs-tooltip-top .arrow,
  .bs-tooltip-bottom .arrow {
    &::before, &::after {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .bs-tooltip-top .arrow::before {
    top: -$tooltip-border-width;
  }
  .bs-tooltip-top .arrow::after {
    top: 0;
    border-width: $tooltip-arrow-height+$tooltip-border-width/2 ($tooltip-arrow-width+$tooltip-border-width)/2  0;
    border-top-color: $tooltip-border-color;
  }

  .bs-tooltip-bottom .arrow::before {
    bottom: -$tooltip-border-width;
  }
  .bs-tooltip-bottom .arrow::after {
    bottom: 0;
    border-width: 0 ($tooltip-arrow-width+$tooltip-border-width)/2  $tooltip-arrow-height+$tooltip-border-width/2;
    border-bottom-color: $tooltip-border-color;
  }

  // right / left
  .bs-tooltip-right .arrow,
  .bs-tooltip-left .arrow {
    &::before, &::after {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .bs-tooltip-right .arrow::before {
    right: -$tooltip-border-width;
  }
  .bs-tooltip-right .arrow::after {
    right: 0;
    border-width: ($tooltip-arrow-width+$tooltip-border-width)/2 $tooltip-arrow-height+$tooltip-border-width/2 ($tooltip-arrow-width+$tooltip-border-width)/2 0;
    border-right-color: $tooltip-border-color;
  }

  .bs-tooltip-left .arrow::before {
    left: -$tooltip-border-width;
  }
  .bs-tooltip-left .arrow::after {
    left: 0;
    border-width: ($tooltip-arrow-width+$tooltip-border-width)/2 0 ($tooltip-arrow-width+$tooltip-border-width)/2 $tooltip-arrow-height+$tooltip-border-width/2;
    border-left-color: $tooltip-border-color;
  }

  .bs-tooltip-auto[x-placement^="top"] {
    @extend .bs-tooltip-top;
  }
  .bs-tooltip-auto[x-placement^="bottom"] {
    @extend .bs-tooltip-bottom;
  }
  .bs-tooltip-auto[x-placement^="right"] {
    @extend .bs-tooltip-right;
  }
  .bs-tooltip-auto[x-placement^="left"] {
    @extend .bs-tooltip-left;
  }
}
