@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/zindex.less";

.tw-tooltip-container {
  display: inline-block;

  & .tooltip {
    visibility: visible;
    user-select: none;
  }

  /*
  What we do is we wait 0.15s so the fade out animation is seen
  and then we run our own animation to hide it with visibility.
  This isn't actually animating, but it just turns visibility to hidden with a delay.
  */
  & .tooltip:not(.in) {
    pointer-events: none;
    animation: tw-tooltip-disappear;
    animation-duration: 0s;
    animation-delay: 0.15s;
    animation-fill-mode: both;
  }
}

@keyframes tw-tooltip-disappear {
  from {
    visibility: visible;
  }

  to {
    visibility: hidden;
  }
}

.np-tooltip {
  z-index: @zindex-tooltip;
  visibility: hidden;

  .tooltip-inner {
    visibility: hidden;
  }

  &--open {
    visibility: initial;

    .tooltip-inner {
      visibility: initial;
    }
  }
}

.np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner {
  .np-panel__arrow {
    left: -7px;
  }
}

.np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner {
  .np-panel__arrow {
    right: -7px;
  }
}
