.@{css-prefix}popover-wrapper{
  display: inline-block;
}
.bui-arrows-theme(){
  // 多个方向
   &[x-placement^="top"]{
     padding: 12px 0;
     & > .bui-popover-arrow{
       bottom: 8px;


     }

   }
   &[x-placement^="right"]{
     padding: 0 12px;
     & > .bui-popover-arrow{
       transform: rotate(135deg);
       left: 8px;

     }
   }
   &[x-placement^="bottom"]{
     padding: 12px 0;
     & > .bui-popover-arrow{
       top: 8px;
       transform: rotate(225deg);

     }
   }
   &[x-placement^="left"]{
     padding: 0 12px;
     & > .bui-popover-arrow{
       right: 8px;
       transform: rotate(315deg);

     }
   }
 }
.@{css-prefix}popover {
  position: relative;
  // width: 410px;
  z-index: @popover-z-index;
  .bui-popover-panel{
    padding: @padding-md;
    background-color: @popper-body-bg;
    border-radius: @border-radius-base;
    box-shadow: @popover-popper-shadow;
    color: @text-color-2;
    .bui-popover-header{
      font-size: @font-size-md;
      line-height: @line-height-md;
      font-weight: @font-weight-bold;
      margin-bottom: @padding-xs;
      color: @text-color-1;
    }
    .bui-popover-body{
      color: @text-color-2;
      font-size: @font-size-sm;
      line-height: @line-height-md;
      white-space: normal;
    }
    .bui-popover-footer{
      margin-top: 15px;
      color: @text-color-2;
    }
  }
  .bui-popover-arrow{
    position: absolute;
    width: 0;
    height: 0;
    border: 4px;
    line-height: 0;
    border-style: solid;
    transform: rotate(45deg);
    box-shadow: @popper-arrow-box-shadow;
    border-top-color: transparent;
    border-right-color: @popper-arrow-bg;
    border-bottom-color: @popper-arrow-bg;
    border-left-color: transparent;
  }
  .bui-arrows-theme();

  &.bui-popover-dark {
    .bui-popover-panel{
      background-color: @popper-dark-bg;
      color: @text-color-white;
    }
    .bui-popover-arrow{
      border-right-color: @popper-arrow-dark-bg;
      border-bottom-color: @popper-arrow-dark-bg;
    }
    .bui-arrows-theme();
    .bui-popover-header, .bui-popover-body, .bui-popover-footer{
      color: @text-color-white;
    }
  }

  &.bui-popover-error {
    .bui-popover-panel {
      border:1px solid @danger-color;
    }
    // .bui-popover-arrow {
    //   border-right:1px solid @danger-color;
    //   border-bottom:1px solid @danger-color;

    // }
  }
}

.@{css-prefix}popover-rtl {
  direction: rtl;
}