@import './var.less';

.@{prefix}-tooltips {
  display: inline;

  // placement top arrow
  &__top-left &__inner::after,
  &__top-center &__inner::after,
  &__top-right &__inner::after {
    border-top-color: transparent;
    border-bottom-color: var(--background-black);
    border-left-color: transparent;
    border-right-color: transparent;
  }

  &__top-left &__inner::after {
    top: -8px;
    left: 12px;
  }

  &__top-center &__inner::after {
    top: -8px;
    left: 50%;
    margin-left: -7px;
  }

  &__top-right &__inner::after {
    top: -8px;
    right: 12px;
  }

  &__bottom-left &__inner::after {
    bottom: -8px;
    left: 12px;
  }

  &__bottom-center &__inner::after {
    bottom: -8px;
    left: 50%;
    margin-left: -7px;
  }

  &__bottom-right &__inner::after {
    bottom: -8px;
    right: 12px;
  }

  &__inner {
    position: absolute;
    z-index: 1;
    border-radius: 3px;
    display: inline-block;
    color: var(--text-white);
    background-color: var(--background-black);

    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: 8;
      border-width: 4px 6px 4px 6px;
      border-style: solid;
      border-top-color: var(--background-black);
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }

  &__txt-tips {
    padding: 8px 10px;
    line-height: 1.3;
    font-size: 14px;
    color: var(--text-white);
  }
}

@keyframes tooltipsTopIn {
  from {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tooltipsTopOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
  }
}

@keyframes tooltipsBottomIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tooltipsBottomOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
}

.tooltips-top-enter-active {
  animation: tooltipsTopIn 0.4s;
}

.tooltips-top-leave-active {
  animation: tooltipsTopOut 0.4s;
}

.tooltips-bottom-enter-active {
  animation: tooltipsBottomIn 0.4s;
}

.tooltips-bottom-leave-active {
  animation: tooltipsBottomOut 0.4s;
}