//======================================================================
// Tooltip
//======================================================================

.tooltip {
  position: relative;

  // tooltip bubble
  &::after {
    @include reset-text;
    position: absolute;
    z-index: $z-index-tooltip;
    display: none;
    padding: $tooltip-padding;
    font-size: $tooltip-font-size;
    color: $tooltip-color;
    word-wrap: break-word;
    white-space: pre;
    background-color: $tooltip-bg-color;
    border-radius: $tooltip-border-radius;
    content: attr(aria-label);
    opacity: 0;
  }

  // tooltip arrow
  &::before {
    position: absolute;
    z-index: $z-index-tooltip + 1;
    display: none;
    width: 0;
    height: 0;
    color: $tooltip-bg-color;
    border: 5px solid transparent;
    content: '';
    opacity: 0;
  }

  &:hover,
  &:active,
  &:focus {
    &::before,
    &::after {
      display: inline-block;
      text-decoration: none;
      animation: $tooltip-animation-duration ease-in $tooltip-animation-delay forwards fade-in;
    }
  }

  // position
  // defualt (top)
  &:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right),
  &.tooltip-top {
    &::after {
      right: 50%;
      bottom: 100%;
      margin-bottom: 5px;
      transform: translateX(50%);
    }

    &::before {
      top: -5px;
      right: 50%;
      bottom: auto;
      margin-right: -5px;
      border-top-color: $tooltip-bg-color;
    }
  }
  // bottom
  &.tooltip-bottom {
    &::after {
      top: 100%;
      right: 50%;
      margin-top: 5px;
      transform: translateX(50%);
    }

    &::before {
      top: auto;
      right: 50%;
      bottom: -5px;
      border-bottom-color: $tooltip-bg-color;
    }
  }
  // left
  &.tooltip-left {
    &::after {
      right: 100%;
      bottom: 50%;
      margin-right: 5px;
      transform: translateY(50%);
    }

    &::before {
      top: 50%;
      left: -5px;
      margin-top: -5px;
      border-left-color: $tooltip-bg-color;
    }
  }
  // right
  &.tooltip-right {
    &::after {
      bottom: 50%;
      left: 100%;
      margin-left: 5px;
      transform: translateY(50%);
    }

    &::before {
      top: 50%;
      right: -5px;
      margin-top: -5px;
      border-right-color: $tooltip-bg-color;
    }
  }
}