@import (reference) './variable.less';
@import '../style/mixins/hairline.less';

@popoverPrefix: ant-popover;

.@{popoverPrefix} {
  position: relative;
  &-mask {
    background: none;
  }
  &-content {
    position: absolute;
    min-width: 64 * @rpx;
    max-width: calc(100vw - 48 * @rpx);
    z-index: 999;
  }
  &-inner {
    position: relative;
    border-radius: 16 * @rpx;
    overflow: hidden;
    font-size: 30 * @rpx;
    background-color: @COLOR_BACKGROUND_POPOVER;
    color: @COLOR_WHITE_DEFAULT;
    padding: 16 * @rpx 24 * @rpx;
    width: max-content;
  }
  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 17 * @rpx solid transparent;
    border-right: 17 * @rpx solid transparent;
    border-bottom: 17 * @rpx solid @COLOR_BACKGROUND_POPOVER;
  }
  /* popover position: top */
  &-top {
    top: -29 * @rpx;
    left: 50%;
    transform: translate(-50%, -100%);
  }
  &-top-left {
    top: -29 * @rpx;
    left: 0;
    transform: translate(0, -100%);
  }
  &-top-right {
    top: -29 * @rpx;
    right: 0;
    transform: translate(0, -100%);
  }
  /* popover position: right */
  &-right {
    top: 50%;
    right: -29 * @rpx;
    transform: translate(100%, -50%);
  }
  &-right-top {
    top: 0;
    right: -29 * @rpx;
    transform: translateX(100%);
  }
  &-right-bottom {
    bottom: 0;
    right: -29 * @rpx;
    transform: translateX(100%);
  }
  /* popover position: bottom */
  &-bottom {
    bottom: -29 * @rpx;
    left: 50%;
    transform: translate(-50%, 100%);
  }
  &-bottom-right {
    bottom: -29 * @rpx;
    right: 0;
    transform: translateY(100%);
  }
  &-bottom-left {
    bottom: -29 * @rpx;
    left: 0;
    transform: translateY(100%);
  }
  /* popover position: left */
  &-left {
    top: 50%;
    left: -29 * @rpx;
    transform: translate(-100%, -50%);
  }
  &-left-top {
    top: 0;
    left: -29 * @rpx;
    transform: translateX(-100%);
  }
  &-left-bottom {
    bottom: 0;
    left: -29 * @rpx;
    transform: translateX(-100%);
  }
  /* arrow position: top */
  &-top &-arrow,
  &-top-left &-arrow,
  &-top-right &-arrow {
    transform: translateY(100%) rotate(180deg);
    bottom: 1 * @rpx;
  }
  &-top &-arrow {
    transform: translate(-50%, 100%) rotate(180deg);
    left: 50%;
  }
  &-top-right &-arrow {
    right: 24 * @rpx;
  }
  &-top-left &-arrow {
    left: 24 * @rpx;
  }
  /* arrow position: right */
  &-right &-arrow,
  &-right-top &-arrow,
  &-right-bottom &-arrow {
    transform: translateX(-75%) rotate(-90deg);
    left: 1 * @rpx;
  }
  &-right &-arrow {
    transform: translate(-75%, -50%) rotate(-90deg);
    top: 50%;
  }
  &-right-bottom &-arrow {
    bottom: 24 * @rpx;
  }
  &-right-top &-arrow {
    top: 24 * @rpx;
  }
  /* arrow position: bottom */
  &-bottom &-arrow,
  &-bottom-left &-arrow,
  &-bottom-right &-arrow {
    transform: translateY(-100%);
  }
  &-bottom &-arrow {
    transform: translate(-50%, -100%);
    left: 50%;
    top: 2 * @rpx;
  }
  &-bottom-left &-arrow {
    left: 24 * @rpx;
    top: 2 * @rpx;
  }
  &-bottom-right &-arrow {
    right: 24 * @rpx;
    top: 2 * @rpx;
  }
  /* arrow position: left */
  &-left &-arrow,
  &-left-top &-arrow,
  &-left-bottom &-arrow {
    transform: translateX(75%) rotate(90deg);
    right: 1 * @rpx;
  }
  &-left &-arrow {
    transform: translate(75%, -50%) rotate(90deg);
    top: 50%;
  }
  &-left-top &-arrow {
    top: 24 * @rpx;
  }
  &-left-bottom &-arrow {
    bottom: 24 * @rpx;
  }
}