@tooltip-cls: ~"@{prefix}-tooltip";

.@{tooltip-cls} {

  &-container {
    position: absolute;
    background-color: @gary-9;
    border-radius: 4px;
    z-index: 999;

    .@{tooltip-cls}-content {
      display: block;
      max-width: 344px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: normal;
      line-height: 1.6;
      color: @gary-1;
      word-wrap: break-word;
      text-align: left;
    }

    .triangle {
      position: absolute;
      bottom: -4px;
      left: 50%;
      width: 0;
      height: 0;
      border-top: 5px solid @gary-9;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      transform: translateX(-50%);
    }
  }

  &-inner {
    position: relative;
    display: inline-grid;
    align-items: center;
    width: auto;
    cursor: pointer;
  }
}

.tooltip-fade-enter-active {
  animation: tooltip-fade-in 0.2s;
}

.tooltip-fade-leave-active {
  animation: tooltip-fade-out 0.2s;
}

@keyframes tooltip-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes tooltip-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}