.Tooltip {
  max-width: var(--spacing-9);
  padding: var(--spacing-m) var(--spacing);
  border-radius: var(--spacing-m);
  z-index: 500;
  background: color-mod(var(--inverse) a(0.88));
  overflow: hidden;
  box-sizing: border-box;
  transition: opacity 120ms;
  transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
}

.Tooltip-text {
  word-break: break-word;
  hyphens: auto;
  color: var(--white) !important;
}

@keyframes tooltip-open-top {
  from {
    top: 0px;
    opacity: 0;
  }
  to {
    top: -4px;
    opacity: 1;
  }
}
@keyframes tooltip-close-top {
  from {
    top: -4px;
    opacity: 1;
  }
  to {
    top: 0px;
    opacity: 0;
  }
}

.Tooltip-animation-open-top {
  /* animation: tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1); */
  animation-fill-mode: forwards;
}
.Tooltip-animation-close-top {
  animation: tooltip-close-top 80ms cubic-bezier(0.4, 0.14, 1, 1);
}

.Tooltip-animation-open-top::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #343238 10px;
  bottom: -10px;
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: 0px;
  position: absolute;
  width: 0;
}

@keyframes tooltip-open-bottom {
  from {
    top: -4px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
@keyframes tooltip-close-bottom {
  from {
    top: 0px;
    opacity: 1;
  }
  to {
    top: -4px;
    opacity: 0;
  }
}

.Tooltip-animation-open-bottom {
  animation: tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
  animation-fill-mode: forwards;
  margin-top: 8px !important;
}

.Tooltip-animation-open-bottom::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #343238 10px;
  bottom: 30px;
  transform: rotate(180deg);
  content: ' ';
  height: 0;
  left: 50%;
  margin-left: 0px;
  position: absolute;
  width: 0;
}

.Tooltip-animation-close-bottom {
  animation: tooltip-close-bottom 80ms cubic-bezier(0.4, 0.14, 1, 1);
}

@keyframes tooltip-open-left {
  from {
    left: 1px;
    opacity: 0;
  }
  to {
    left: -3px;
    opacity: 1;
  }
}
@keyframes tooltip-close-left {
  from {
    left: -3px;
    opacity: 1;
  }
  to {
    left: 1px;
    opacity: 0;
  }
}

.Tooltip-animation-open-left {
  /* animation: tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1); */
  animation-fill-mode: forwards;
  margin-left: 10px !important;
}
.Tooltip-animation-open-left::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #343238 10px;
  bottom: 30px;
  transform: rotate(90deg);
  content: ' ';
  height: 0;
  left: -13px;
  top: 10px;
  margin-left: 0px;
  position: absolute;
  width: 0;
}

.Tooltip-animation-close-left {
  animation: tooltip-close-left 80ms cubic-bezier(0.4, 0.14, 1, 1);
}

@keyframes tooltip-open-right {
  from {
    left: -3px;
    opacity: 0;
  }
  to {
    left: 1px;
    opacity: 1;
  }
}
@keyframes tooltip-close-right {
  from {
    left: 1px;
    opacity: 1;
  }
  to {
    left: -3px;
    opacity: 0;
  }
}

.Tooltip-animation-open-right {
  animation: tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
  animation-fill-mode: forwards;
  margin-left: 10px !important;
}

.Tooltip-animation-open-right ::after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #343238 10px;
  bottom: 30px;
  transform: rotate(90deg);
  content: ' ';
  height: 0;
  left: -13px;
  top: 10px;
  margin-left: 0px;
  position: absolute;
  width: 0;
}

.Tooltip-animation-close-right {
  animation: tooltip-close-right 80ms cubic-bezier(0.4, 0.14, 1, 1);
}

/* .Tooltip-container {
  transition-delay: 400ms;
  animation-delay: 400ms;
} */

.Tooltip-container {
  background: var(--night);
  margin-bottom: 10px !important;
}