.tippy {
  &-popper {
    font-family: $body-font-family;
  }
}

.tippy-tooltip.dark-theme {
  background-color: $tooltip-background-color;
  color: $tooltip-text-color;
  padding: $tooltip-padding;
  border-radius: $tooltip-border-radius;

  .tippy-content {
    font-size: $tooltip-font-size;
    font-weight: 500;
    line-height: 1.5; // 21px
  }

  .tippy-roundarrow {
    fill: $tooltip-background-color;
  }
}

.tippy-tooltip.dark-theme[x-placement^='top'] .tippy-arrow {
  border-top-color: $tooltip-background-color;
}

.tippy-tooltip.dark-theme[x-placement^='bottom'] .tippy-arrow {
  border-bottom-color: $tooltip-background-color;
}

.tippy-tooltip.dark-theme[x-placement^='left'] .tippy-arrow {
  border-left-color: $tooltip-background-color;
}

.tippy-tooltip.dark-theme[x-placement^='right'] .tippy-arrow {
  border-right-color: $tooltip-background-color;
}