@import '../../style/vars.less';

@popoverPrefixCls: pptmui-popover;

.@{popoverPrefixCls} {
  position: absolute;
  background-color: transparent!important;
  transition: opacity 0.15s, transform 0.15s;

  &__wrapper {
    display: inline-block;
  }

  &__arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: @popover-arrow-size;
  }

  &__overlay {
    background-color: rgba(0, 0, 0, 0.2);
  }

  &__content {
    overflow: hidden;
    border-radius: @popover-border-radius;
  }

  &--light {
    color: @popover-light-color;

    .@{popoverPrefixCls} {
      &__arrow {
        color: @popover-light-bg-color;
      }

      &__content {
        background-color: @popover-light-bg-color;
        box-shadow: @popover-light-box-shadow;
      }
    }
  }

  &--dark {
    color: @popover-dark-color;

    .@{popoverPrefixCls} {
      &__arrow {
        color: @popover-dark-bg-color;
      }

      &__content {
        background-color: @popover-dark-bg-color;
        box-shadow: @popover-dark-box-shadow;
      }
    }
  }

  &-zoom-enter,
  &-zoom-exit-active {
    transform: scale(0.8);
    opacity: 0;
  }

  &-zoom-enter-active {
    transition-timing-function: @animation-timing-function-enter;
  }

  &-zoom-exit-active {
    transition-timing-function: @animation-timing-function-leave;
  }

  &[data-popper-placement^='top'] {
    .@{popoverPrefixCls}__arrow {
      bottom: 0;
      border-top-color: currentColor;
      border-bottom-width: 0;
      transform: translate(-50%, 100%);
    }
  }

  &[data-popper-placement='top'] {
    transform-origin: 50% 100%;

    .@{popoverPrefixCls}__arrow {
      left: 50%;
    }
  }

  &[data-popper-placement='top-start'] {
    transform-origin: 0 100%;

    .@{popoverPrefixCls}__arrow {
      left: @popover-start-left;
    }
  }

  &[data-popper-placement='top-end'] {
    transform-origin: 100% 100%;

    .@{popoverPrefixCls}__arrow {
      right: @popover-end-right;
    }
  }

  &[data-popper-placement^='left'] {
    .@{popoverPrefixCls}__arrow {
      right: 0;
      border-right-width: 0;
      border-left-color: currentColor;
      transform: translate(100%, -50%);
    }
  }

  &[data-popper-placement='left'] {
    transform-origin: 100% 50%;

    .@{popoverPrefixCls}__arrow {
      top: 50%;
    }
  }

  &[data-popper-placement='left-start'] {
    transform-origin: 100% 0;

    .@{popoverPrefixCls}__arrow {
      top: @popover-start-top;
    }
  }

  &[data-popper-placement='left-end'] {
    transform-origin: 100% 100%;

    .@{popoverPrefixCls}__arrow {
      bottom: 18px;
    }
  }

  &[data-popper-placement^='right'] {
    .@{popoverPrefixCls}__arrow {
      left: 0;
      border-right-color: currentColor;
      border-left-width: 0;
      transform: translate(-100%, -50%);
    }
  }

  &[data-popper-placement='right'] {
    transform-origin: 0 50%;

    .@{popoverPrefixCls}__arrow {
      top: 50%;
    }
  }

  &[data-popper-placement='right-start'] {
    transform-origin: 0 0;

    .@{popoverPrefixCls}__arrow {
      top: @popover-start-top;
    }
  }

  &[data-popper-placement='right-end'] {
    transform-origin: 0 100%;

    .@{popoverPrefixCls}__arrow {
      bottom: 18px;
    }
  }

  &[data-popper-placement^='bottom'] {
    .@{popoverPrefixCls}__arrow {
      top: 0;
      border-top-width: 0;
      border-bottom-color: currentColor;
      transform: translate(-50%, -100%);
    }
  }

  &[data-popper-placement='bottom'] {
    transform-origin: 50% 0;

    .@{popoverPrefixCls}__arrow {
      left: 50%;
    }
  }

  &[data-popper-placement='bottom-start'] {
    transform-origin: 0 0;

    .@{popoverPrefixCls}__arrow {
      left: @popover-start-left;
    }
  }

  &[data-popper-placement='bottom-end'] {
    transform-origin: 100% 0;

    .@{popoverPrefixCls}__arrow {
      right: @popover-end-right;
    }
  }
}