$background-fill: var(--wds-tooltip-background-fill, var(--wds-color-fill-surface-overlay));
$text-fill: var(--wds-tooltip-text-fill, var(--wds-color-text-standard-primary));

.tooltip {
  & .popover-content__content {
    color: $text-fill;
    background: $background-fill;
  }

  &.popover--skin-dark#{&}--size-small .popover-content__content {
    padding: var(--wds-tooltip-padding-vertical-small, var(--wds-space-200)) var(--wds-tooltip-padding-horizontal-small, var(--wds-space-200)) var(--wds-tooltip-padding-vertical-small, var(--wds-space-200));
  }

  &.popover--skin-dark#{&}--size-medium .popover-content__content {
    padding: var(--wds-tooltip-padding-vertical-medium, var(--wds-space-300)) var(--wds-tooltip-padding-horizontal-medium, var(--wds-space-300));
  }

  & .popover-content__arrow::after {
    border-color: transparent $background-fill $background-fill transparent;
  }

  &.popover--skin-dark &__text#{&}__text {
    color: $text-fill;
  }
}