$content-arrow-size: 8px;
$border-width: var(--wds-tooltip-border-width, var(--wds-border-width-100));
$border-fill: var(--wds-tooltip-border-fill, var(--wds-color-black-750));
$background-fill: var(--wds-tooltip-background-fill, #000000);
$text-fill: var(--wds-tooltip-text-fill, var(--wds-color-text-standard-primary));

.tooltip {
  & .popover-content__content {
    border-radius: var(--wds-tooltip-border-radius, var(--wds-border-radius-300));
    border-width: $border-width;
    border-color: $border-fill;
    color: $text-fill;
    background: $background-fill;
  }

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

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

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

  & .popover-content__arrow::after {
    top: calc(#{$content-arrow-size} / -2 - #{$border-width});
    left: calc(#{$content-arrow-size} / -2 - #{$border-width});
    border-color: transparent $background-fill $background-fill transparent;
  }

  &.popover#{&}--size-small .popover-content__content &__text {
    line-height: var(--wds-tooltip-label-font-line-height-small, var(--wds-font-line-height-body-extra-tiny));
  }

  &.popover#{&}--size-medium .popover-content__content &__text {
    font-weight: var(--wds-tooltip-label-font-weight-medium, var(--wds-font-weight-medium));
    font-size: var(--wds-tooltip-label-font-size-medium, var(--wds-font-size-body-tiny));
    line-height: var(--wds-tooltip-label-font-line-height-medium, var(--wds-font-line-height-body-small));
  }

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