@css-prefix             : haloe-;

@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
@tooltip-arrow: ~"@{tooltip-prefix-cls}-arrow";
@tooltip-max-width: 250px;
@tooltip-bg-color:#363B46; // ★待定

.@{tooltip-prefix-cls} {
    display: inline-block;

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

    &-popper{
        border-radius: @border-radius-base;
        background-color: @tooltip-bg-color;
        color: @color-functional-white;
        display: block;
        // display: none;
        visibility: visible;
        font-size: @font-size-base;
        // line-height: @line-height-base;
        position: absolute;
        z-index: @zindex-tooltip;
        box-shadow: @tooltip-shadow;

        &[data-popper-placement^='top'] .@{tooltip-arrow}{
          bottom: -4px;
        }

        &[data-popper-placement^='right'] .@{tooltip-arrow} {
          left: -4px;
        }

        &[data-popper-placement^='left'] .@{tooltip-arrow} {
          right: -4px;
        }

        &[data-popper-placement^='bottom'] .@{tooltip-arrow} {
          top: -4px;
        }
    }
    &-light&-popper{
        display: block;
        visibility: visible;
        font-size: @font-size-base;
        line-height: @line-height-base;
        position: absolute;
        z-index: @zindex-tooltip;

        &[data-popper-placement^='top'] .@{tooltip-arrow} {
          bottom: -4px;
        }

        &[data-popper-placement^='right'] .@{tooltip-arrow} {
          left: -4px;
        }

        &[data-popper-placement^='left'] .@{tooltip-arrow} {
          right: -4px;
        }

        &[data-popper-placement^='bottom'] .@{tooltip-arrow} {
          top: -4px;
        }
        background-color:@color-functional-white;

    }
    &-inner{
        max-width: @tooltip-max-width;
        // min-height: 30px;
        line-height: 20px;
        padding: 6px 8px;
        color: @color-functional-white;
        text-align: left;
        text-decoration: none;
        // border-radius: @border-radius-small;
        // box-shadow: @shadow-base;
        white-space: nowrap;

        &-with-width{
            white-space: normal;
            text-align: justify;
            // 解决纯字母或数字不换行的问题
            word-wrap: break-word;
            word-break: break-all;
        }

        .haloe-icon{
          margin-right: 5px;
        }
    }

    &-light &-inner{
        background-color: @tooltip-bg-color;
        color:#555555; // ★待定
        box-shadow: 0 0 10px 0 @color-shadow2;
    }
    &-warning &-inner{
      background-color: @red-50;
      color:@color-functional-fail;
      box-shadow: 0 0 10px 0 @tooltip-warning-shadow;
    }
    &-arrow {
      position: absolute;
      width: 8px;
      height: 8px;
      box-sizing: border-box;
      background-color: @tooltip-bg-color;
      // background-color: inherit;
      z-index: -1;
      content: " ";
      transform: rotate(45deg);
      box-sizing: border-box;
      transform-origin: 50% 50%;
    }
    // &-arrow::before{
    //   position: absolute;
    //   width: 8px;
    //   height: 8px;
    //   box-sizing: border-box;
    //   // background-color: @color-complementary-24;
    //   // background-color: inherit;
    //   z-index: -1;
    //   content: " ";
    //   transform: rotate(45deg);
    //   box-sizing: border-box;
    //   transform-origin:50% 50%;
    // }
    &-light {
        .@{tooltip-arrow}{
            background-color: @tooltip-bg-color;
        }
    }

    &-warning{
      .@{tooltip-arrow}{
        background-color:@red-50; 
      }
    }
}