/* reset */
button {
  all: unset;
}

.TooltipContent {
  border-radius: 4px;
  padding: var(--size-150) var(--size-200);
  font-size: 16px;
  line-height: 1;
  z-index: 6;
  color: var(--foreground-neutral-inverted);
  background-color: var(--background-neutral-inverted);
  user-select: none;
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  border: 1px solid var(--black-200);
  * {
    color: var(--foreground-neutral-inverted);
  }
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  &:after {
    content: "";
    background-color: var(--background-neutral-inverted);
    width: 10px;
    height: 2px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0;
    margin: auto;
  }
}
.TooltipContent[data-state="delayed-open"][data-side="top"] {
  animation-name: slideDownAndFade;
}
.TooltipContent[data-state="delayed-open"][data-side="right"] {
  animation-name: slideLeftAndFade;
}
.TooltipContent[data-state="delayed-open"][data-side="bottom"] {
  animation-name: slideUpAndFade;
}
.TooltipContent[data-state="delayed-open"][data-side="left"] {
  animation-name: slideRightAndFade;
}

.TooltipArrow {
  fill: var(--background-neutral-inverted);
  stroke: var(--black-200);
  stroke-width: 2.5px;
  position: relative;
  z-index: -2;
  margin-top: -1px;
}

@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRightAndFade {
  from {
    opacity: 0;
    transform: translateX(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeftAndFade {
  from {
    opacity: 0;
    transform: translateX(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}