/* =========================
   Tooltip
   Figma: Tooltips / Hint popovers.
========================= */

@use "../kit-deps" as *;

.tooltip {
  position: relative;
  display: inline-flex;

  .tooltip-trigger {
    display: inline-flex;
  }

  .tooltip-content {
    position: absolute;
    z-index: 1000;
    max-width: 260px;
    padding: $space-2 $space-3;
    border-radius: $radius-md;
    background-color: $neutral-900;
    color: $neutral-0;
    font-size: 13px;
    line-height: 1.4;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition:
      opacity $motion-fast $motion-ease,
      visibility $motion-fast $motion-ease,
      transform $motion-fast $motion-ease;

    &::before {
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: $neutral-900;
      transform: rotate(45deg);
    }
  }

  &[data-placement="top"],
  &:not([data-placement]) {
    .tooltip-content {
      bottom: 100%;
      left: 50%;
      margin-bottom: $space-2;
      transform: translateX(-50%) translateY(4px);

      &::before {
        top: calc(100% - 4px);
        left: 50%;
        margin-left: -4px;
      }
    }
  }

  &[data-placement="bottom"] {
    .tooltip-content {
      top: 100%;
      left: 50%;
      margin-top: $space-2;
      transform: translateX(-50%) translateY(-4px);

      &::before {
        bottom: calc(100% - 4px);
        left: 50%;
        margin-left: -4px;
      }
    }
  }

  &[data-placement="left"] {
    .tooltip-content {
      top: 50%;
      right: 100%;
      margin-right: $space-2;
      transform: translateY(-50%) translateX(4px);

      &::before {
        top: 50%;
        right: -4px;
        margin-top: -4px;
      }
    }
  }

  &[data-placement="right"] {
    .tooltip-content {
      top: 50%;
      left: 100%;
      margin-left: $space-2;
      transform: translateY(-50%) translateX(-4px);

      &::before {
        top: 50%;
        left: -4px;
        margin-top: -4px;
      }
    }
  }

  &.is-visible .tooltip-content,
  &:hover .tooltip-content,
  .tooltip-trigger:focus + .tooltip-content,
  .tooltip-trigger:focus-within + .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  &[data-placement="left"].is-visible .tooltip-content,
  &[data-placement="left"]:hover .tooltip-content {
    transform: translateY(-50%) translateX(0);
  }

  &[data-placement="right"].is-visible .tooltip-content,
  &[data-placement="right"]:hover .tooltip-content {
    transform: translateY(-50%) translateX(0);
  }
}