// ==========================================================================
// Tooltips
// ==========================================================================

$tooltip-width: 250px;
$tooltip-offset: 24px;
$tooltip-delay: .1s; //Delay pop up of tooltip from trigger
$tooltip-bg: $black;

[data-tooltip] {
  position: relative;
  // cursor: help;
  // border-bottom: 1px dotted $text-color;
  text-decoration: none;

  &:hover:after,
  &:hover:before {
    opacity: 1;
    visibility: visible;
    @include transition-delay($tooltip-delay);
  }

  &:before,
  &:after {
    display: block;
    position: absolute;
    left: 50%;
    @include transform(translateX(-50%));

    //Hide and transition
    opacity: 0;
    visibility: hidden;
    @include transition(opacity $transition, visibility $transition);
    @include transition-delay(0s);
  }

  &:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: $tooltip-offset;
    left: 50%;
    width: $tooltip-width;
    padding: $pad;
    z-index: $z-foreground;
    line-height: $line-height-sm;
    border-radius: $border-radius;
    background: $tooltip-bg;
    color: $white;
    font-size: $font-sm;
    font-weight: $font-normal;
    text-align: center;
    text-transform: none;
  }

  &.tooltip-narrow-oneline {
    &:after {
      width: auto;
      white-space: nowrap;
    }
  }

  &:before {
    content: "";
    bottom: $tooltip-offset/1.25;
    @include triangle(16px, $tooltip-bg, down);
  }
}

//- Tooltip Marker
// Use left and top to position the marker relative to its parent (a diagram for example)

$tooltip-marker-size: 16px;

.tooltip-marker {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  @include transform(translateX(-50%));
  width: $tooltip-marker-size;
  height: $tooltip-marker-size;
  background: $white;
  border: 2px solid $blue;
  box-shadow: 0 0 4px fade-out($blue, .5);
  border-radius: $border-radius-circle;
  cursor: pointer;
  @include transition(background $transition);

  &.active,
  &:hover {
    background: $blue;
  }
}