// Tooltip
// --------------------------------------------------

@mixin embla-tooltip($tooltip-bg-color, $tooltip-text-color) {
  .tooltip-inner {
     background-color: $tooltip-bg-color;
     color: $tooltip-text-color;
  }

  &.top .tooltip-arrow,
  &.top-left .tooltip-arrow,
  &.top-right .tooltip-arrow { border-top-color: $tooltip-bg-color; }

  &.right .tooltip-arrow { border-right-color: $tooltip-bg-color; }

  &.left .tooltip-arrow { border-left-color: $tooltip-bg-color; }

  &.bottom .tooltip-arrow,
  &.bottom-left .tooltip-arrow,
  &.bottom-right .tooltip-arrow { border-bottom-color: $tooltip-bg-color; }
}


.tooltip {

  .tooltip-inner { 
    @include box-shadow($tooltip-boxshadow);
   }

  // Default tooltip
  &.tooltip--default {
    @include embla-tooltip($tooltip-default-bg, $text-color);
  }

  &.tooltip--dark {
    @include embla-tooltip($tooltip-dark-bg, $color-white);
  }

  &.tooltip--white {
    @include embla-tooltip($tooltip-white-bg, $text-color);
  }

  &.tooltip--danger {
    @include embla-tooltip($tooltip-danger-bg, $color-white);
  }

  &.tooltip--success {
    @include embla-tooltip($tooltip-success-bg, $color-white);
  }

}
