@import '../../style/themes/index';
@import '../../style/mixins/index';

@popper-prefix-cls: ~'@{kd-prefix}-popper';

.@{popper-prefix-cls} {
  opacity: 1;
  z-index: @z-index-popper;
  visibility: visible;

  &.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .arrow {
    visibility: hidden;

    &::before {
      visibility: visible;
      position: absolute;
      border-style: solid;
      border-width: var(--arrowSize);
      content: '';
      transform: rotate(45deg);
    }
  }

  &[data-popper-placement^='top'] .arrow {
    bottom: calc(1.07 * var(--arrowSize));

    &.transparent {
      bottom: calc(0.96 * var(--arrowSize));
    }

    &::before {
      left: calc(-1 * var(--arrowSize));
      border-top-color: transparent;
      border-left-color: transparent;
    }
  }

  &[data-popper-placement^='bottom'] .arrow {
    top: calc(-0.75 * var(--arrowSize));

    &.transparent {
      top: calc(-0.85 * var(--arrowSize));
    }

    &::before {
      left: calc(-1 * var(--arrowSize));
      border-bottom-color: transparent;
      border-right-color: transparent;
    }
  }

  &[data-popper-placement^='left'] .arrow {
    right: calc(1.07 * var(--arrowSize));

    &.transparent {
      right: calc(0.9 * var(--arrowSize));
    }

    &::before {
      top: calc(-1 * var(--arrowSize));
      border-left-color: transparent;
      border-bottom-color: transparent;
    }
  }

  &[data-popper-placement^='right'] .arrow {
    left: calc(-0.75 * var(--arrowSize));

    &.transparent {
      left: calc(-0.85 * var(--arrowSize));
    }

    &::before {
      top: calc(-1 * var(--arrowSize));
      border-top-color: transparent;
      border-right-color: transparent;
    }
  }
}

.popper-motion(@className, @keyframeName, @duration: calc(@transition-duration - 0.1s)) {
  .@{className} {
    animation-duration: @duration;

    &-in {
      animation-name: ~'@{keyframeName}In';
      animation-timing-function: @ease-out;
    }

    &-out {
      animation-name: ~'@{keyframeName}Out';
      animation-timing-function: @ease-in;
    }
  }
}

.@{popper-prefix-cls}-rtl {
  direction: rtl;
  text-align: right
}

.popper-motion(~'@{popper-prefix-cls}-top', kdSlideDown);
.popper-motion(~'@{popper-prefix-cls}-left', kdZoomRight);
.popper-motion(~'@{popper-prefix-cls}-right', kdZoomLeft);
.popper-motion(~'@{popper-prefix-cls}-bottom', kdSlideUp);
.popper-motion(~'@{popper-prefix-cls}-top-start', kdSlideDown);
.popper-motion(~'@{popper-prefix-cls}-right-end', kdZoomLeftBottom);
.popper-motion(~'@{popper-prefix-cls}-top-end', kdSlideDown);
.popper-motion(~'@{popper-prefix-cls}-left-end', kdZoomRightBottom);
.popper-motion(~'@{popper-prefix-cls}-left-start', kdZoomTopRight);
.popper-motion(~'@{popper-prefix-cls}-bottom-end', kdSlideUp);
.popper-motion(~'@{popper-prefix-cls}-right-start', kdZoomTopLeft);
.popper-motion(~'@{popper-prefix-cls}-bottom-start', kdSlideUp);