.@{surely-tooltip-prefix-cls} {
  .reset-component();
  background-color: ~'var(--@{surely-table-prefix-cls}-tooltip-bg-color)';
  color: #fff;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 6px;
  z-index: 99;

  .@{surely-tooltip-prefix-cls}-arrow {
    background-color: transparent;
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: -1;
    border: 6px solid transparent;
  }

  &.@{surely-tooltip-prefix-cls}-placement-top-start,
  &.@{surely-tooltip-prefix-cls}-placement-top,
  &.@{surely-tooltip-prefix-cls}-placement-top-end {
    .@{surely-tooltip-prefix-cls}-arrow {
      border-top-color: ~'var(--@{surely-table-prefix-cls}-tooltip-bg-color)';
      bottom: 0;
      transform: translateY(100%);
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-top {
    .@{surely-tooltip-prefix-cls}-arrow {
      left: 50%;
      transform: translateX(-50%) translateY(100%);
    }
  }

  &.@{surely-tooltip-prefix-cls}-placement-top-start {
    .@{surely-tooltip-prefix-cls}-arrow {
      left: 12px;
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-top-end {
    .@{surely-tooltip-prefix-cls}-arrow {
      right: 12px;
    }
  }

  &.@{surely-tooltip-prefix-cls}-placement-bottom-start,
  &.@{surely-tooltip-prefix-cls}-placement-bottom,
  &.@{surely-tooltip-prefix-cls}-placement-bottom-end {
    .@{surely-tooltip-prefix-cls}-arrow {
      border-bottom-color: ~'var(--@{surely-table-prefix-cls}-tooltip-bg-color)';
      top: 0;
      transform: translateY(-100%);
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-bottom {
    .@{surely-tooltip-prefix-cls}-arrow {
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-bottom-start {
    .@{surely-tooltip-prefix-cls}-arrow {
      left: 12px;
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-bottom-end {
    .@{surely-tooltip-prefix-cls}-arrow {
      right: 12px;
    }
  }

  &.@{surely-tooltip-prefix-cls}-placement-left-start,
  &.@{surely-tooltip-prefix-cls}-placement-left,
  &.@{surely-tooltip-prefix-cls}-placement-left-end {
    .@{surely-tooltip-prefix-cls}-arrow {
      border-left-color: ~'var(--@{surely-table-prefix-cls}-tooltip-bg-color)';
      right: 0;
      transform: translateX(100%);
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-left {
    .@{surely-tooltip-prefix-cls}-arrow {
      top: 50%;
      transform: translateY(-50%) translateX(100%);
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-left-start {
    .@{surely-tooltip-prefix-cls}-arrow {
      top: 12px;
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-left-end {
    .@{surely-tooltip-prefix-cls}-arrow {
      bottom: 12px;
    }
  }

  &.@{surely-tooltip-prefix-cls}-placement-right-start,
  &.@{surely-tooltip-prefix-cls}-placement-right,
  &.@{surely-tooltip-prefix-cls}-placement-right-end {
    .@{surely-tooltip-prefix-cls}-arrow {
      border-right-color: ~'var(--@{surely-table-prefix-cls}-tooltip-bg-color)';
      left: 0;
      transform: translateX(-100%);
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-right {
    .@{surely-tooltip-prefix-cls}-arrow {
      top: 50%;
      transform: translateY(-50%) translateX(-100%);
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-right-start {
    .@{surely-tooltip-prefix-cls}-arrow {
      top: 12px;
    }
  }
  &.@{surely-tooltip-prefix-cls}-placement-right-end {
    .@{surely-tooltip-prefix-cls}-arrow {
      bottom: 12px;
    }
  }
}
.@{surely-tooltip-prefix-cls}-fade-enter-from {
  opacity: 0;
}
.@{surely-tooltip-prefix-cls}-fade-enter-to {
  opacity: 1;
}
.@{surely-tooltip-prefix-cls}-fade-leave-from {
  opacity: 1;
}
.@{surely-tooltip-prefix-cls}-fade-leave-to {
  opacity: 0;
}
.@{surely-tooltip-prefix-cls}-fade-enter-active,
.@{surely-tooltip-prefix-cls}-fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}
.@{surely-tooltip-prefix-cls}-fade-enter-from,
.@{surely-tooltip-prefix-cls}-fade-leave-to {
  opacity: 0;
}