@import '../../style/theme/default.less';

@tooltip-prefix-cls: ~'@{kui-prefix}-tooltip';
@default-color: rgba(52, 106, 255, 1);
@arrow-distance: 30px;
@arrow-height: 24px;

.@{tooltip-prefix-cls} {
  position: absolute;
  z-index: 10;
  max-width: 570px;
  padding: 22px 20px;
  border-radius: 10px;
  opacity: 0;
  transform: scale(1);

  &-animation-entering {
    opacity: 1;
    transform: scale(0);
    animation: ~'@{tooltip-prefix-cls}-entering' 0.3s ease-in 0s 1 forwards;
  }

  @keyframes ~'@{tooltip-prefix-cls}-entering' {
    0% {
      transform: scale(0);
      opacity: 0;
    }

    80% {
      transform: scale(1.04);
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  &-animation-leaving {
    animation: ~'@{tooltip-prefix-cls}-leaving' 0.3s ease-out 0s 1 forwards;
  }

  @keyframes ~'@{tooltip-prefix-cls}-leaving' {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  &-inner {
    display: flex;
    align-items: center;
  }

  &-text {
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 32px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    word-break: break-all;
  }

  &-close {
    margin-left: 24px;
    font-size: 18px;
    color: #fff;
  }

  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: solid 12px transparent;

    &-top {
      bottom: -@arrow-height;
      left: 50%;
      border-top-color: @default-color;
      transform: translate(-50%, 0);
    }

    &-topLeft {
      bottom: -@arrow-height;
      left: @arrow-distance;
      border-top-color: @default-color;
    }

    &-topRight {
      right: @arrow-distance;
      bottom: -@arrow-height;
      border-top-color: @default-color;
    }

    &-right {
      top: 50%;
      left: -@arrow-height;
      border-right-color: @default-color;
      transform: translate(0, -50%);
    }

    &-rightTop {
      top: @arrow-distance;
      left: -@arrow-height;
      border-right-color: @default-color;
    }

    &-rightBottom {
      bottom: @arrow-distance;
      left: -@arrow-height;
      border-right-color: @default-color;
    }

    &-bottom {
      top: -@arrow-height;
      left: 50%;
      border-bottom-color: @default-color;
      transform: translate(-50%, 0);
    }

    &-bottomLeft {
      top: -@arrow-height;
      left: @arrow-distance;
      border-bottom-color: @default-color;
    }

    &-bottomRight {
      top: -@arrow-height;
      right: @arrow-distance;
      border-bottom-color: @default-color;
    }

    &-left {
      top: 50%;
      right: -@arrow-height;
      border-left-color: @default-color;
      transform: translate(0, -50%);
    }

    &-leftTop {
      top: @arrow-distance;
      right: -@arrow-height;
      border-left-color: @default-color;
    }

    &-leftBottom {
      right: -@arrow-height;
      bottom: @arrow-distance;
      border-left-color: @default-color;
    }
  }
}