.tippy-box {

  @include body-copy-text;
  font-size: 1.6rem;
  box-shadow: $box-shadow-moderately;
  background-color: #fff;
  border: $outer-border;
  background-clip: padding-box;
  color: $color-black;
}

.tippy-box > .tippy-backdrop {
  background-color: #fff
}

.tippy-box > .tippy-arrow:after, .tippy-box > .tippy-svg-arrow:after {
  content: "";
  position: absolute;
  z-index: -1
}

.tippy-box > .tippy-arrow:after {
  border-color: transparent;
  border-style: solid
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  border-top-color: #fff;
}

.tippy-box[data-placement^=top] > .tippy-arrow:after {
  border-top-color: $color-gray-medium-dark;
  border-width: 7px 7px 0;
  top: 17px;
  left: 1px
}

.tippy-box[data-placement^=top] > .tippy-svg-arrow > svg {
  top: 16px
}

.tippy-box[data-placement^=top] > .tippy-svg-arrow:after {
  top: 17px
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  border-bottom-color: #fff;
  bottom: 16px
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:after {
  border-bottom-color: $color-gray-medium-dark;
  border-width: 0 7px 7px;
  bottom: 17px;
  left: 1px
}

.tippy-box[data-placement^=bottom] > .tippy-svg-arrow > svg {
  bottom: 16px
}

.tippy-box[data-placement^=bottom] > .tippy-svg-arrow:after {
  bottom: 17px
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-left-color: #fff
}

.tippy-box[data-placement^=left] > .tippy-arrow:after {
  border-left-color: $color-gray-medium-dark;
  border-width: 7px 0 7px 7px;
  left: 17px;
  top: 1px
}

.tippy-box[data-placement^=left] > .tippy-svg-arrow > svg {
  left: 11px
}

.tippy-box[data-placement^=left] > .tippy-svg-arrow:after {
  left: 12px
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  border-right-color: #fff;
  right: 16px
}

.tippy-box[data-placement^=right] > .tippy-arrow:after {
  border-width: 7px 7px 7px 0;
  right: 17px;
  top: 1px;
  border-right-color: $color-gray-medium-dark;
}

.tippy-box[data-placement^=right] > .tippy-svg-arrow > svg {
  right: 11px
}

.tippy-box[data-placement^=right] > .tippy-svg-arrow:after {
  right: 12px
}

.tippy-box > .tippy-svg-arrow {
  fill: #fff
}

.tippy-box > .tippy-svg-arrow:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
  background-size: 16px 6px;
  width: 16px;
  height: 6px
}

//Styling of tippy.js tooltips v4.3.5

.popover{
  cursor: pointer;
}
.tippy-tooltip{
  @include body-copy-text;
  font-size: 1.6rem;
  box-shadow: $box-shadow-moderately;
  background-color:#fff;
  border: $outer-border;
}
.tippy-tooltip .tippy-backdrop{
  background-color:#fff
}
.tippy-tooltip .tippy-roundarrow{
  fill:#fff
}
.tippy-tooltip[data-animatefill]{
  background-color:transparent
}

.tippy-popper[x-placement^=top] .tippy-tooltip .tippy-arrow{
  border-top:7px solid $color-gray-medium-light;
  border-right:7px solid transparent;
  border-left:7px solid transparent;
  &: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;
  }
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip .tippy-arrow{
  border-bottom:7px solid $color-gray-medium-light;
  border-right:7px solid transparent;
  border-left:7px solid transparent;
  &: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;
  }
}
.tippy-popper[x-placement^=left] .tippy-tooltip .tippy-arrow{
  border-left:7px solid $color-gray-medium-light;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  &: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;
  }
}
.tippy-popper[x-placement^=right] .tippy-tooltip .tippy-arrow{
  border-right:7px solid $color-gray-medium-light;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  &: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;
  }
}

.tippy-popper .tooltip {
  border:none;
  background: none;
  padding:0;
}