.tooltip__trigger {
  cursor: help;
  display: inline-block;
  border-bottom: 1px dashed rgb(var(--border--links-strong-default--light));

  &:hover {
    color: rgb(var(--foreground--links-strong-hovered--light));
    border-bottom-color: currentColor;
  }
}

.tooltip {
  --tooltipPadding: var(--padding--md);
  --tooltipAnimationDuration: 200ms;
  --tooltipAnimationOrigin: translateY(var(--offset--sm));

  cursor: help;

  transform: rotate(0deg);

  max-width: 300px;
  padding: var(--tooltipPadding);

  color: rgb(var(--foreground--neutral-full-default--dark));
  text-align: center;
  word-wrap: break-word;

  background-color: rgb(var(--background--neutral-strong-default--light));
  outline: none;

  fill: rgb(var(--background--neutral-strong-default--light));

  &[data-placement='bottom'] {
    --tooltipAnimationOrigin: translateY(calc(-1 * var(--offset--sm)));
  }

  &[data-placement='left'] {
    --tooltipAnimationOrigin: translateX(var(--offset--sm));
  }

  &[data-placement='right'] {
    --tooltipAnimationOrigin: translateX(calc(-1 * var(--offset--sm)));
  }

  &[data-placement='bottom'] .tooltip__arrow > svg {
    transform: rotate(180deg);
  }

  &[data-placement='right'] .tooltip__arrow > svg {
    transform: rotate(90deg);
  }

  &[data-placement='left'] .tooltip__arrow > svg {
    transform: rotate(-90deg);
  }

  & .tooltip__arrow svg {
    display: block;
  }

  &[data-state='opened'] {
    animation: tooltipSlideIn var(--tooltipAnimationDuration) forwards;
  }

  &[data-state='closed'] {
    animation: tooltipSlideOut var(--tooltipAnimationDuration) ease-in forwards;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  .typography {
    color: inherit;

    strong {
      color: inherit;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .tooltip {
    --tooltipAnimationDuration: 0ms;
  }
}

@keyframes tooltipSlideIn {
  from {
    transform: var(--tooltipAnimationOrigin);
    opacity: var(--blend--full--light);
  }

  to {
    transform: translate(0, 0);
    opacity: var(--blend--solid--light);
  }
}

@keyframes tooltipSlideOut {
  from {
    transform: translate(0, 0);
    opacity: var(--blend--solid--light);
  }

  to {
    transform: var(--tooltipAnimationOrigin);
    opacity: var(--blend--full--light);
  }
}