$tooltip-shift-amount: 60%;
$hover-message-shift: calc(50% - 3.06rem);

.tooltip-wrapper {
  display: inline-block;
}

.tooltip {
  position: relative;
  cursor: help;
  display: inline-block;
}

.hover-message {
  @include typography-b-10;
  background: color('primary-2');
  border: 1px solid color('neutral-2');
  color: color('primary-3');
  font-weight: 400;
  opacity: 0;
  padding: rem-calc(12px);
  position: absolute;
  text-align: left;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  left: 50%;
  transition: opacity .15s ease-out;
  visibility: hidden;
  width: ru(10);
  z-index: 10;

  &:before,
  &:after {
    content: '';
    border: solid transparent;
    bottom: 100%;
    display: inline-block;
    height: 0;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    width: 0;
  }

  &:before {
    border-bottom-color: color('neutral-2');
    border-width: 10px;
  }

  &:after {
    border-bottom-color: color('primary-2');
    border-width: 8px;
  }
}

.right,
.left {
  left: auto;
  transform: none;
}

.right {
  right: $hover-message-shift;
  &:before,
  &:after {
    right: -$tooltip-shift-amount;
  }
}

.left {
  left: $hover-message-shift;
  &:before,
  &:after {
    right: $tooltip-shift-amount;
  }
}

.inline-left {
  vertical-align: middle;
  margin-right: ru(.25);
}

.inline-right {
  vertical-align: middle;
  margin-left: ru(.25);
}

@media #{$medium-up} {
  .tooltip-wrapper {
    position: relative;

    &:hover {
      .hover-message {
        display: block;
        visibility: visible;
        opacity: 1;
        overflow-wrap: break-word;
      }
    }
  }

  .reveal {
    position: relative;

    .hover-message {
      display: block;
      visibility: visible;
      opacity: 1;
      overflow-wrap: break-word;
    }
  }
}