@popover-prefix: ~'@{icecream-prefix}-popover';
@popover-arrow-width: 5px;
// popover 到 child 的距离
@popover-distance: @popover-arrow-width + 4;
@popover-color: @icecream-color-grey-1;
@popover-bg-color: @icecream-white;
@popover-arrow-color: @icecream-white;
@popover-title-font-size: @icecream-font-size-main;
@popover-content-font-size: @icecream-font-size-main;
@popover-icon-font-size: @icecream-font-size-main;

.@{popover-prefix} {
  position: absolute;
  z-index: @icecream-z-index-popup;

  &-hidden {
    display: none;
  }

  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight {
    padding-bottom: @popover-distance;
  }
  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom {
    padding-left: @popover-distance;
  }
  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight {
    padding-top: @popover-distance;
  }
  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom {
    padding-right: @popover-distance;
  }

  // 默认无标题样式
  &-inner {
    .extendBase();
    display: flex;
    padding: @icecream-gap-md;
    color: @icecream-color-grey-10;
    pointer-events: auto;
    user-select: text;
    background: @icecream-color-grey-1;
    background-color: @icecream-white;
    border-radius: @icecream-border-radius;
    box-shadow: @icecream-box-shadow-lg;

    &-icon {
      @padding-top: (getIcecreamLineHeightByPx(@popover-title-font-size)- @popover-icon-font-size) / 2px;

      margin-right: 9px;
      padding-top: 4px;
      font-size: @popover-icon-font-size;
      color: @icecream-color-orange-6;
      // line-height 居中 svg 不靠谱，设置成 0 换 padding 去调整
      line-height: 0;
    }

    &-main {
      &-title {
        .extendBase();
        color: @icecream-bold-color;
        font-size: @popover-title-font-size;
        font-weight: @icecream-bold;
      }

      &-content {
        .extendBase();
        font-size: @popover-content-font-size;
      }

      // 有标题的情况
      &-title + &-content {
        margin-top: 4px;
      }

      &-btns {
        .extendBase();
        margin-top: @icecream-gap-lg;
        text-align: right;

        button + button {
          margin-left: 8px;
        }
      }
    }
  }
}

// 箭头处理
.@{popover-prefix} {
  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow {
    margin-bottom: @popover-distance - @popover-arrow-width;
    margin-left: -@popover-arrow-width;
    border-width: @popover-arrow-width @popover-arrow-width 0;
    border-top-color: @popover-arrow-color;
  }

  &-placement-right &-arrow,
  &-placement-rightTop &-arrow,
  &-placement-rightBottom &-arrow {
    margin-left: @popover-distance - @popover-arrow-width;
    margin-top: -@popover-arrow-width;
    border-width: @popover-arrow-width @popover-arrow-width @popover-arrow-width 0;
    border-right-color: @popover-arrow-color;
  }

  &-placement-left &-arrow,
  &-placement-leftTop &-arrow,
  &-placement-leftBottom &-arrow {
    margin-right: @popover-distance - @popover-arrow-width;
    margin-top: -@popover-arrow-width;
    border-width: @popover-arrow-width 0 @popover-arrow-width @popover-arrow-width;
    border-left-color: @popover-arrow-color;
  }

  &-placement-bottom &-arrow,
  &-placement-bottomLeft &-arrow,
  &-placement-bottomRight &-arrow {
    margin-top: @popover-distance - @popover-arrow-width;
    margin-left: -@popover-arrow-width;
    border-width: 0 @popover-arrow-width @popover-arrow-width;
    border-bottom-color: @popover-arrow-color;
  }
}