.tooltip {
  position: relative;

  & {
    &:before,
    &:after {
      visibility: hidden;
      opacity: 0;
      transition: .3s opacity;
      pointer-events: none;
      z-index: 100;
    }

    &:before {
      content: attr(data-title);
      position: absolute;
      display: block;
      bottom: calc(100% + .5rem);
      left: 50%;
      background: $color-text;
      color: $color-white;
      white-space: nowrap;
      line-height: 1;
      font-weight: $font-weight-normal;
      font-size: $font-size-h6;
      font-family: $font-family-base;
      padding: $gap-2;
      border-radius: $border-radius;
      transform: translateX(-50%);
    }

    &:after {
      content: '';
      width: 0;
      height: 0;
      border: $gap-1 solid transparent;
      border-top-color: $color-text;
      position: absolute;
      left: calc(50% - #{$gap-1});
      bottom: 100%;
    }

    &:hover {
      &:before,
      &:after {
        opacity: 1;
        visibility: visible;
        transition-delay: .3s;
      }
    }
  }
}

.tooltip-monospaced {
  & {
    &:before {
      font-family: $font-family-monospace;
      font-size: $font-size-h6;
    }
  }
}