// @import '../_utils.scss';

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

  &-relative {
    position: relative;
  }

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

  &-popper {
    @include popper($tooltip-arrow, $tooltip-arrow-width, $tooltip-distance, $tooltip-bg);
    // 皮肤用来覆盖popper()中的选择器
    &[x-placement^=top] .#{$tooltip-arrow} {
      @include theme-border-top-color($__common-tooltip-popper-top_border-top-color);
    }
    &[x-placement^=right] .#{$tooltip-arrow} {
      @include theme-border-right-color($__common-tooltip-popper-right_border-right-color);
    }
    &[x-placement^=left] .#{$tooltip-arrow} {
      @include theme-border-left-color($__common-tooltip-popper-left_border-left-color);
    }
    &[x-placement^=bottom] .#{$tooltip-arrow} {
      @include theme-border-bottom-color($__common-tooltip-popper-bottom_border-bottom-color);
    }
    // end

  }

  &-inner {
    max-width: $tooltip-max-width;
    min-height: $tooltip-inner-min-height;
    padding: $tooltip-inner-padding;
    color: $tooltip-color;
    @include theme-color($__tooltip-content_font-color);
    font-size: $tooltip-inner-font-size;
    text-align: left;
    text-decoration: none;
    background-color: $tooltip-bg;
    @include theme-background-color($__tooltip-content_background-color);
    border-radius: $border-radius-small;
    box-shadow: $shadow-base;
    @include theme-box-shadow($__tooltip_box-shadow);
    white-space: nowrap;
  }

  &-arrow {
    position: absolute;
    width: 0;
    height: $tooltip-arrow-height;
    border-color: transparent;
    border-style: solid;
  }
}