$content-arrow-size: 8px;
$font-family: var(--wds-font-family-default, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif));
$border-width: var(--wds-tooltip-border-width, var(--wds-border-width-none, 0px));
$border-fill: var(--wds-tooltip-border-fill, var(--wds-color-black-100-transparent-0, transparent));
$background-fill: var(--wds-tooltip-background-fill, var(--wds-color-fill-surface-overlay-dark, var(--wsr-color-D10, #000624)));
$text-fill: var(--wds-tooltip-text-fill, var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #FFFFFF)));

.tooltip {
  display: inline;

  &#{&}--inline .popover__element {
    display: inline-block;
    max-width: 100%;
  }

  & .popover-content__content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    border-radius: var(--wds-tooltip-border-radius, var(--wds-border-radius-surface-overlay, 8px));
    box-shadow: var(--wds-shadow-surface-overlay-dark, var(--wsr-shadow30, 0 6px 6px 0 rgba(22, 45, 61, 0.06), 0 0 18px 0 rgba(22, 45, 61, 0.12)));
    border-style: solid;
    border-width: $border-width;
    border-color: $border-fill;
    color: $text-fill;
    background: $background-fill;
  }

  &.popover--skin-dark#{&}--size-small .popover-content__content {
    font-family: $font-family;
    font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px));
    font-weight: var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400));
    line-height: var(--wds-font-line-height-body-tiny, var(--wsr-text-line-height-tiny, 15px));
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    padding: var(--wds-tooltip-padding-vertical-small, var(--wds-space-100, 8px)) var(--wds-tooltip-padding-horizontal-small, var(--wds-space-200, 12px)) var(--wds-tooltip-padding-vertical-small, var(--wds-space-100, 7px));
  }

  &.popover--skin-dark#{&}--size-medium .popover-content__content {
    font-family: $font-family;
    font-size: var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px));
    font-weight: var(--wds-font-weight-medium, var(--wsr-font-weight-medium, 530));
    line-height: var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px));
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    padding: var(--wds-tooltip-padding-vertical-medium, var(--wds-space-200, 12px)) var(--wds-tooltip-padding-horizontal-medium, var(--wds-space-400, 24px));
  }

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

  & .popover-content__arrow::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: $content-arrow-size;
    height: $content-arrow-size;
    top: calc(#{$content-arrow-size} / -2 - #{$border-width});
    left: calc(#{$content-arrow-size} / -2 - #{$border-width});
    border-style: solid;
    border-width: calc(#{$content-arrow-size} / 2);
    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-tiny, var(--wsr-text-line-height-tiny, 15px)));
  }

  &.popover#{&}--size-medium .popover-content__content &__text {
    font-weight: var(--wds-tooltip-label-font-weight-medium, var(--wds-font-weight-regular, var(--wsr-font-weight-regular, 400)));
    font-size: var(--wds-tooltip-label-font-size-medium, var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px)));
    line-height: var(--wds-tooltip-label-font-line-height-medium, var(--wds-font-line-height-body-small, var(--wsr-text-line-height-small, 18px)));
  }

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