$font-family-H: 'Helvetica Neue', Tahoma, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STHeitiSC, sans-serif;
$font-family-A: "Helvetica Neue", Tahoma, "PingFang SC", "Hiragino Sans GB", SimSun, STHeitiSC, sans-serif;

$c1: #004170;
$c2: #005999;
$c3: #1687d9;
$c4: #96d0fa;
$m1: #36434d;
$m2: #667580;
$m3: #acb7bf;
$m4: #e4ebf0;
$m5: #f5f8fa;
$z1: #ed5958;
$z2: #f28d48;
$z3: #f6d215;
$z4: #38ba72;
$z5: #53c6c6;
$z6: #40afd8;
$z7: #5b99ee;

@mixin H1 {
  font-family: $font-family-H;
  font-size: 34px;
  line-height: 1.8;
}

@mixin H2 {
  font-family: $font-family-H;
  font-size: 24px;
  line-height: 1.8;
}

@mixin H3 {
  font-family: $font-family-H;
  font-size: 20px;
  line-height: 1.8;
}

@mixin H4 {
  font-family: $font-family-H;
  font-size: 16px;
  line-height: 1.9;
}

@mixin H6 {
  font-family: $font-family-H;
  font-size: 12px;
  line-height: 20px;
}



@mixin A1 {
  font-family: $font-family-A;
  font-size: 14px;
  line-height: 20px;
}

@mixin A2 {
  font-family: $font-family-A;
  font-size: 12px;
  line-height: 20px;
}

.tooltip__hidden{
  visibility: hidden;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -10;
}

.tooltip{
  @include  H6;
  z-index: 999999999;
  display: block;
  position: absolute;
  letter-spacing: normal;
  line-break: auto;
  text-align: left;
  text-decoration: none;
  word-break: break-all;
  word-spacing: normal;
  width: auto;



  &.top {
    padding: 5px 0;
  }
  &.bottom{
    padding: 5px 0;
  }
  &.right{
    padding: 0 5px;
  }
  &.left{
    padding: 0 5px;
  }
  .tooltip-inner {
    padding: 5px 10px ;
    color: $m5;
    text-align: left;
    background-color: $m1;
    border-radius: 2px;
    max-width: 600px;
  }
}



.tooltip-arrow {
  position:absolute ;
  width:0;
  height: 0;
  z-index: 999999999;
  
  &.top{
    border-left:5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid $m1;
  }
  &.bottom{
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid $m1;
  }
  &.right{
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid $m1;
  }
  &.left{
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid $m1;
  }
}
// 为防止IE下小三角位置四舍五入后造成错位，将三角的大小做大一点然后向内缩进1像素
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.tooltip-arrow {
    &.top{
      margin-top: -1px;
    }
    &.bottom{
    }
  }
}