@import "./mixins/mixins.scss";
@import "./theme/default.scss";

@include b(tooltip) {
  & {
    display: inline-block;
    position: relative;
  }
  .n-tooltip__popup.is-hidden {
    display: none;
  }
  .n-tooltip__popup.has-emerged {
    opacity: 0.5;
    transform: translateX(-50%) translateY(4px);
  }
  .n-tooltip__popup {
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    padding-top: 4px;
    opacity: 1;
    transition: opacity 0.3s $default-cubic-bezier,
      transform 0.3s $fast-in-cubic-bezier;
    .n-tooltip-popup__content {
      white-space: nowrap;
      border-radius: 6px;
      background-color: rgba(75, 81, 106, 1);
      color: #ffffffe6;
      padding: 8px 14px;
      font-size: 12px;
    }
  }
  .n-tooltip__popup.is-vanishing {
    opacity: 0;
    transition: opacity 0.3s $default-cubic-bezier,
      transform 0.3s $slow-out-cubic-bezier !important;
    transform: translateX(-50%) translateY(4px);
  }
}