//Styling of tippy.js tooltips
.js-tooltip{
  display: inline-block;

  svg{
    pointer-events: none;
  }
}

.popover{
    cursor: pointer;
}
.tooltip{
  @include body-copy-text;
  font-size: 1.6rem;
  box-shadow: $box-shadow-moderately;
  background-color:#fff;
  border: $outer-border;
  border-radius: 4px;
  padding: .3rem .6rem;
}

.tooltip-popper{
  position: absolute;
}

.tooltip-popper .tooltip-arrow {
  position: absolute;
}
.tooltip-popper[x-placement^=top] .tooltip-arrow{
    border-top:7px solid $color-gray-medium-light;
    border-right:7px solid transparent;
    border-left:7px solid transparent;
    bottom: -6px;
    left: calc(50% - 7px);

    &:after{
        content: '';
        border-top: 6px solid white;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        display: block;
        position: absolute;
        bottom: 1px;
        margin-left: -6px;
    }
}
.tooltip-popper[x-placement^=bottom] .tooltip-arrow{
    border-bottom:7px solid $color-gray-medium-light;
    border-right:7px solid transparent;
    border-left:7px solid transparent;
    top: -6px;
    left: calc(50% - 7px);
    &:after{
        content: '';
        border-bottom: 6px solid white;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        display: block;
        position: absolute;
        top: 1px;
        margin-left: -6px;
    }
}
.tooltip-popper[x-placement^=left] .tooltip-arrow{
    border-left:7px solid $color-gray-medium-light;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    right: -6px;
    top: calc(50% - 7px);
    &:after{
        content: '';
        border-left: 6px solid white;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        display: block;
        position: absolute;
        top: -6px;
        margin-left: -7px;
    }
}
.tooltip-popper[x-placement^=right] .tooltip-arrow{
    border-right:7px solid $color-gray-medium-light;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    left: -6px;
    top: calc(50% - 7px);
    &:after{
        content: '';
        border-right: 6px solid white;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        display: block;
        position: absolute;
        top: -6px;
        margin-left: 1px;
    }
}