@import '../scss/variable';

$tooltip-prefix: #{$prefix}-tooltip;
@mixin ne-tooltip {
  .#{$tooltip-prefix} {
    position: absolute;
    width: auto;
    opacity: 0;
    transition: all 0.3s;
    cursor: auto;
    user-select: text;
    &-box {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1001;
      width: 100%;
    }
    &-inner {
      overflow: hidden;
      border-radius: $global-radius;
      box-shadow: $global-shadow;
      background-color: $tooltip-bg;
    }

    &-header {
      padding: 8px 16px;
      & + .#{$tooltip-prefix}-content {
        border-top: 1px solid $tooltip-hr;
      }
    }
    &-content {
      padding: 8px 16px;
    }
    // 小箭头
    &-arrow {
      border-width: $tooltip-arrow-outer-width;
      &,
      &:after {
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-width: $tooltip-arrow-width;
        border-style: solid;
        border-color: transparent;
        content: '';
      }
    }

    &-position-top,
    &-position-topLeft,
    &-position-topRight {
      padding-bottom: $tooltip-distance;
    }

    &-position-right,
    &-position-rightTop,
    &-position-rightBottom {
      padding-left: $tooltip-distance;
    }

    &-position-bottom,
    &-position-bottomLeft,
    &-position-bottomRight {
      padding-top: $tooltip-distance;
    }

    &-position-left,
    &-position-leftTop,
    &-position-leftBottom {
      padding-right: $tooltip-distance;
    }

    &-position-top > &-arrow,
    &-position-topLeft > &-arrow,
    &-position-topRight > &-arrow {
      bottom: $tooltip-distance - $tooltip-arrow-outer-width;
      border-bottom-width: 0;
      border-top-color: $tooltip-arrow-outer-color;
      &:after {
        bottom: 1px;
        margin-left: -$tooltip-arrow-width;
        border-bottom-width: 0;
        border-top-color: $tooltip-arrow-color;
        content: ' ';
      }
    }
    &-position-top > &-arrow {
      left: 50%;
      margin-left: -$tooltip-arrow-outer-width;
    }
    &-position-topLeft > &-arrow {
      left: 16px;
    }
    &-position-topRight > &-arrow {
      right: 16px;
    }

    &-position-right > &-arrow,
    &-position-rightTop > &-arrow,
    &-position-rightBottom > &-arrow {
      left: $tooltip-distance - $tooltip-arrow-outer-width;
      border-left-width: 0;
      border-right-color: $tooltip-arrow-outer-color;
      &:after {
        bottom: -$tooltip-arrow-width;
        left: 1px;
        border-left-width: 0;
        border-right-color: $tooltip-arrow-color;
        content: ' ';
      }
    }
    &-position-right > &-arrow {
      top: 50%;
      margin-top: -$tooltip-arrow-outer-width;
    }
    &-position-rightTop > &-arrow {
      top: 12px;
    }
    &-position-rightBottom > &-arrow {
      bottom: 12px;
    }

    &-position-bottom > &-arrow,
    &-position-bottomLeft > &-arrow,
    &-position-bottomRight > &-arrow {
      top: $tooltip-distance - $tooltip-arrow-outer-width;
      border-top-width: 0;
      border-bottom-color: $tooltip-arrow-outer-color;
      &:after {
        top: 1px;
        margin-left: -$tooltip-arrow-width;
        border-top-width: 0;
        border-bottom-color: $tooltip-arrow-color;
        content: ' ';
      }
    }
    &-position-bottom > &-arrow {
      left: 50%;
      margin-left: -$tooltip-arrow-outer-width;
    }
    &-position-bottomLeft > &-arrow {
      left: 16px;
    }
    &-position-bottomRight > &-arrow {
      right: 16px;
    }

    &-position-left > &-arrow,
    &-position-leftTop > &-arrow,
    &-position-leftBottom > &-arrow {
      right: $tooltip-distance - $tooltip-arrow-outer-width;
      border-right-width: 0;
      border-left-color: $tooltip-arrow-outer-color;
      &:after {
        right: 1px;
        bottom: -$tooltip-arrow-width;
        border-right-width: 0;
        border-left-color: $tooltip-arrow-color;
        content: ' ';
      }
    }
    &-position-left > &-arrow {
      top: 50%;
      margin-top: -$tooltip-arrow-outer-width;
    }
    &-position-leftTop > &-arrow {
      top: 12px;
    }
    &-position-leftBottom > &-arrow {
      bottom: 12px;
    }
  }
}