@import "../var/options";
@import "../var/colors";
@import "../var/transitions";

@import "../fn/utils";

$tooltip-padding-x: .9em !default;
$tooltip-padding-y: .75em !default;
$tooltip-radius: $border-radius !default;
$tooltip-font-size: .75em !default;

$tooltip-transition: .4s $ease-out-expo !default;

$tooltip-bg: $black !default;
$tooltip-color: $white !default;

$tooltip-shadow: false; // 0 10px 15px -5px !default;
$tooltip-max-width: 300px !default;

$tooltip-pointer-height: 7px !default;
$tooltip-pointer-width: $tooltip-pointer-height !default;

.tooltip {
  position: absolute;
  display: inline-block;
  font-size: $tooltip-font-size;
  padding: $tooltip-padding-y $tooltip-padding-x;
  max-width: $tooltip-max-width;
  background-color: $tooltip-bg;
  transform: translateY(-25%);
  color: $tooltip-color;
  opacity: 0;

  @if $enable-border-radius {
    border-radius: $tooltip-radius;
  }
  @if $enable-transitions {
    transition: $tooltip-transition;
  }
  @if $enable-shadows {
    box-shadow: $tooltip-shadow rgba($black, .25);
  }

  @each $accent, $color in $color-map {
    &.tooltip-#{$accent} {
      background-color: $color;
      color: text-color($color);

      @if $enable-shadows {
        box-shadow: $tooltip-shadow rgba(darken($color, 25%), .25);
      }
    }
  }

  &.top {
    transform: translate(-50%, -75%);
    left: 50%; top: -$tooltip-pointer-height;

    &.active {
      transform: translate(-50%, -100%);
      opacity: 1;
    }

    .tooltip-pointer {
      bottom: -($tooltip-pointer-height * .5); left: 50%;
      transform: translateX(-50%) rotate(45deg);
    }
  }
  &.bottom {
    transform: translate(-50%, 75%);
    left: 50%; bottom: -$tooltip-pointer-height;

    &.active {
      transform: translate(-50%, 100%);
      opacity: 1;
    }

    .tooltip-pointer {
      top: -($tooltip-pointer-height * .5); left: 50%;
      transform: translateX(-50%) rotate(45deg);
    }
  }
  &.left {
    transform: translate(-75%, -50%);
    left: -$tooltip-pointer-height; top: 50%;

    &.active {
      transform: translate(-100%, -50%);
      opacity: 1;
    }

    .tooltip-pointer {
      right: -($tooltip-pointer-height * .5); top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }
  &.right {
    transform: translate(75%, -50%);
    right: -$tooltip-pointer-height; top: 50%;

    &.active {
      transform: translate(100%, -50%);
      opacity: 1;
    }

    .tooltip-pointer {
      left: -($tooltip-pointer-height * .5); top: 50%;
      transform: translateY(-50%) rotate(45deg);
    }
  }

  .tooltip-pointer {
    position: absolute;
    display: inline-block;
    background-color: inherit;
    height: $tooltip-pointer-height;
    width: $tooltip-pointer-width;
  }
}