@import "./var.less";
.ix-tooltip{
  position: absolute;
  border-radius: 4px;
  z-index: 2000;
  line-height: 1.4;
  text-align: justify;
  font-size: @fontSize;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid #ebeef5;
  background: #fff;
  color: @fontColor;
  left: 0;
  top: 0;
  .ix-tooltip__arrow, .ix-tooltip__arrow:after{
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }
  .ix-tooltip__arrow{
    border-width: 6px;
    z-index: 0;
    left: 50%;
    &:after{
      content: " ";
      border-width: 6px;
      margin-left: -6px;
    }
  }
  &.ix-placement-bottom{
    .ix-tooltip__arrow{
      top: -6px;
      margin-left: -6px;
      border-bottom-color: #ebeef5;
      border-top-width: 0;
      &:after{
        top: 1px;
        border-bottom-color: #fff;
        border-top-width: 0;
      }
    }
  }
  &.ix-placement-top{
    .ix-tooltip__arrow{
      bottom: -6px;
      margin-left: -6px;
      border-top-color: #ebeef5;
      border-bottom-width: 0;
      &:after{
        bottom: 1px;
        margin-left: -6px;
        border-top-color: #fff;
        border-bottom-width: 0;
      }
    }
  }
  &.ix-placement-left{
    .ix-tooltip__arrow{
      right: -6px;
      top: 12px;
      border-right-width: 0;
      border-left-color: #ebeef5;
      left: auto;
      &:after{
        top: -6px;
        left: -1px;
        border-left-color: #fff;
        border-right-width: 0;
      }
    }
  }
  &.ix-placement-right{
    .ix-tooltip__arrow{
      left: -6px;
      top: 12px;
      border-left-width: 0;
      border-right-color: #ebeef5;
      &:after{
        top: -6px;
        left: 7px;
        border-right-color: #fff;
        border-left-width: 0;
      }
    }
  }
}