$poptip-prefix-cls: "#{$css-prefix}poptip";
$poptip-arrow: "#{$poptip-prefix-cls}-arrow";


.#{$poptip-prefix-cls} {
  display: inline-block;

  &-rel {
    display: inline-block;
    position: relative;
  }

  &-title {
    margin: $poptip-title-margin;
    padding: $poptip-title-padding;
    position: relative;

    &::after {
      content: "";
      display: block;
      height: 1px;
      position: absolute;
      left: $poptip-title-after-left;
      right: $poptip-title-after-right;
      bottom: $poptip-title-after-bottom;
      background-color: #ededed;//*********************************8
    }

    &-inner {
      // color: $title-color;
      // font-size: $font-size-base;
      font-family: "Microsoft YaHei-Bold", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
      font-size: $poptip-title-inner-font-size;
      color: $text-color;
      letter-spacing: 0;
      text-align: left;
      line-height: $poptip-title-inner-line-height;
      font-weight: $poptip-title-inner-font-weight;
    }
  }

  &-body {
    padding: $poptip-body-padding;

    &-content {
      overflow: auto;

      &-inner {
        // color: $text-color;
        font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
        font-size: $poptip-body-inner-font-size;
        color: $poptip-body-inner-color;
        text-align: left;
        line-height: 16px;//***************************************8
      }
    }
  }

  &-inner {
    width: 100%;
    background-color: $poptip-inner-background-color;
    background-clip: padding-box;
    //border: 1px solid $border-color-split;
    border-radius: $border-radius-small;
    box-shadow: $shadow-base;
    max-width: 256px;//**************
    white-space: normal;//**************************888
  }

  &-popper {
    min-width: $poptip-popper-min-width;
    font-size: $font-size-small;

    @include popper($poptip-arrow, $poptip-arrow-width, $poptip-distance, $poptip-arrow-color);
    &[x-placement^="top"] .#{$poptip-arrow}:after {
      content: " ";
      bottom: 1px;
      margin-left: -$poptip-arrow-width;
      border-bottom-width: 0;
      border-top-color: $poptip-popper-after-border-top-color;
    }
    &[x-placement^="right"] .#{$poptip-arrow}:after {
      content: " ";
      left: 1px;
      bottom: -$poptip-arrow-width;
      border-left-width: 0;
      border-right-color: $poptip-popper-after-border-right-color;
    }
    &[x-placement^="bottom"] .#{$poptip-arrow}:after {
      content: " ";
      top: 1px;
      margin-left: -$poptip-arrow-width;
      border-top-width: 0;
      border-bottom-color: $poptip-popper-after-border-bottom-color;
    }
    &[x-placement^="left"] .#{$poptip-arrow}:after {
      content: " ";
      right: 1px;
      border-right-width: 0;
      border-left-color: $poptip-popper-after-border-left-color;
      bottom: -$poptip-arrow-width;
    }
  }

  &-arrow {
    border-width: $poptip-arrow-outer-width;

    &,
    &::after {
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      border-color: transparent;
      border-style: solid;
    }
  }

  &-arrow::after {
    content: "";
    border-width: $poptip-arrow-width;
  }

  &-confirm &-popper {
    max-width: 300px;
  }

  &-confirm &-inner {
    white-space: normal;
  }

  &-confirm &-body {
    padding: $poptip-confirm-body-padding;

    .iconfont {
      font-size: $poptip-confirm-body-iconfont-font-size;
      color: $warning-color;
      line-height: $poptip-confirm-body-iconfont-line-height;
      position: absolute;
    }

    &-message {
      padding-left: $poptip-confirm-message-padding-left;
      font-size: $poptip-confirm-message-font-size;
      color: $poptip-confirm-message-color;
    }
  }

  &-confirm &-footer {
    text-align: right;
    padding: $poptip-confirm-footer-padding;

    button {
      margin-left: $poptip-confirm-footer-button-margin-left;
    }
  }
  // 211979 修复了Poptip 加上transfer 属性之后样式显示错乱
  // 设置了transfer为true之后 下拉弹出的部分已经不在&-confirm下了，导致样式没有加上
  &-popper-confirm {
    max-width: 300px;
  }

  &-popper-confirm &-inner {
    white-space: normal;
  }

  &-popper-confirm &-body {
    padding: $poptip-confirm-body-padding;

    .iconfont {
      font-size: $poptip-confirm-body-iconfont-font-size;
      color: #f2b044;//*********************************
      line-height: $poptip-confirm-body-iconfont-line-height;
      position: absolute;
    }

    &-message {
      padding-left: $poptip-confirm-message-padding-left;
      font-size: $poptip-confirm-message-font-size;
      color: $poptip-confirm-message-color;
    }
  }

  &-popper-confirm &-footer {
    text-align: right;
    padding: $poptip-confirm-footer-padding;

    button {
      margin-left: $poptip-confirm-footer-button-margin-left;
    }
  }
}