//
// Tooltips
//

[class*="tooltip-"] {
  position: relative;
  display: inline-block;

  // Both
  &:hover::before,
  &:hover::after {
    visibility: visible;
    opacity: 1;
    transition-delay: 100ms;
  }

  &::before,
  &::after {
    position: absolute;
    z-index: 1000000;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  // Tooltip arrow
  &::before {
    position: absolute;
    z-index: 1000001;
    content: "";
    background: transparent;
    border: 6px solid transparent;
  }

  // Tooltip content
  &::after {
    padding: 8px 16px;
    line-height: 12px;
    color: $tooltip-color;
    white-space: nowrap;
    visibility: hidden;
    background: $tooltip-bg;
    @include border-radius(4px);
  }

  // Attach content to tooltip
  &[aria-label]::after {
    content: attr(aria-label);
  }
}

//
// Positions
//

// Top
.tooltip-top::before {
  left: calc(50% - 6px);
  border-top-color: $tooltip-bg;
}

.tooltip-top::before,
.tooltip-top::after {
  bottom: 100%;
  left: 50%;
}

.tooltip-top::after {
  transform: translateX(-50%);
}

.tooltip-top:hover::before {
  transform: translateY(6px);
}

.tooltip-top:hover::after {
  transform: translateX(-50%) translateY(-6px);
}

// Bottom
.tooltip-bottom::before {
  left: calc(50% - 6px);
  border-bottom-color: $tooltip-bg;
}

.tooltip-bottom::before,
.tooltip-bottom::after {
  top: 100%;
  left: 50%;
}

.tooltip-bottom::after {
  transform: translateX(-50%);
}

.tooltip-bottom:hover::before {
  transform: translateY(-4px);
}

.tooltip-bottom:hover::after {
  transform: translateX(-50%) translateY(8px);
}

// Right
.tooltip-right::before {
  margin-bottom: -8px;
  border-right-color: $tooltip-bg;
}

.tooltip-right::after {
  margin-bottom: -16px;
}

.tooltip-right::before,
.tooltip-right::after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:hover::after {
  transform: translateX(12px);
}

// Left
.tooltip-left::before {
  margin-bottom: -8px;
  border-left-color: $tooltip-bg;
}

.tooltip-left::after {
  margin-bottom: -16px;
}

.tooltip-left::before,
.tooltip-left::after {
  right: 100%;
  bottom: 50%;
}

.tooltip-left:hover::after {
  transform: translateX(-12px);
}