@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";

@include b(tooltip) {
  &:focus:not(.focusing),
  &:focus:hover {
    outline-width: 0;
  }
  @include e(popper) {
    position: absolute;
    border-radius: $--tooltip-border-radius;
    padding: $--tooltip-padding;
    z-index: $--index-popper;
    font-size: $--tooltip-font-size;
    min-width: $--tooltip-min-width;
    word-wrap: break-word;
    max-width: $--tooltip-max-width;
    box-sizing: border-box;
    line-height: 14px;
    word-break: break-all;

    .popper__arrow,
    .popper__arrow::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    .popper__arrow {
      border-width: $--tooltip-arrow-size;
    }

    .popper__arrow::after {
      content: " ";
      border-width: $--tooltip-arrow-size / 2;
    }

    &[x-placement^="top"] {
      margin-bottom: $--tooltip-arrow-offset;
    }
    &[x-placement^="top"] .popper__arrow {
      bottom: -$--tooltip-arrow-size / 2;
      border-bottom-width: 0;

      &::after {
        bottom: 0px;
        margin-left: -5px;
        border-bottom-width: 0;
        border-top-color: $--tooltip-default-bg;
      }
    }
    // 下
    &[x-placement^="bottom"] {
      margin-top: $--tooltip-arrow-offset;
    }
    &[x-placement^="bottom"] .popper__arrow {
      top: -$--tooltip-arrow-size / 2;
      border-top-width: 0;

      &::after {
        top: 0px;
        margin-left: -5px;
        border-top-width: 0;
        border-bottom-color: $--tooltip-default-bg;
      }
    }
    // 右
    &[x-placement^="right"] {
      margin-left: $--tooltip-arrow-offset;
    }
    &[x-placement^="right"] .popper__arrow {
      left: -$--tooltip-arrow-size;
      border-left-width: 0;

      &::after {
        bottom: 0;
        left: $--tooltip-arrow-size / 2;
        border-right-color: $--tooltip-default-bg;
        border-left-width: 0;
      }
    }
    // 左
    &[x-placement^="left"] {
      margin-right: $--tooltip-arrow-offset;
    }
    &[x-placement^="left"] .popper__arrow {
      right: -$--tooltip-arrow-size;
      border-right-width: 0;

      &::after {
        right: $--tooltip-arrow-size / 2;
        bottom: 0;
        border-right-width: 0;
        border-left-color: $--tooltip-default-bg;
      }
    }

    @include when(dark) {
      background: $--tooltip-default-bg;
      color: $--tooltip-theme-color-light;
    }

    @include when(light) {
      background: $--tooltip-theme-color-light;
      box-shadow: $--tooltip-box-shadow;
      color: $--tooltip-font-color-light;

      &[x-placement^="top"] .popper__arrow {
        border-top-color: $--tooltip-theme-color-light;
        &::after {
          border-top-color: $--tooltip-theme-color-light;
        }
      }
      &[x-placement^="bottom"] .popper__arrow {
        border-bottom-color: $--tooltip-theme-color-light;
        &::after {
          border-bottom-color: $--tooltip-theme-color-light;
        }
      }
      &[x-placement^="left"] .popper__arrow {
        border-left-color: $--tooltip-theme-color-light;
        &::after {
          border-left-color: $--tooltip-theme-color-light;
        }
      }
      &[x-placement^="right"] .popper__arrow {
        border-right-color: $--tooltip-theme-color-light;
        &::after {
          border-right-color: $--tooltip-theme-color-light;
        }
      }
      @include e(closebtn) {
        @include trans-peudo-class-color($--tooltip-closebtn-color, $--tooltip-closebtn-color);
      }
    }

    @include when(closable) {
      padding-right: #{$--tooltip-closebtn-offset + $--tooltip-closebtn-width + $--tooltip-text-closebtn-offset};
    }
    @include e(content) {
      max-height: $--tooltip-max-height - $--tooltip-padding * 2;
      padding: 3px 6px;
      line-height: 16px;
    }

    @include e(closebtn) {
      @include close-btn($--tooltip-closebtn-width, 0, 15px, $--tooltip-closebtn-offset, $--tooltip-closebtn-size);
      @include trans-peudo-class-color($--tooltip-arrow-color, $--tooltip-arrow-color);
    }

    @include e(popper-btn) {
      padding-top: 4px;
      text-align: right;
      min-width: 58px;

      & span:first-child {
        margin-right: 10px;
        color: $--tooltip-btn-color;
      }
      & span{
        cursor: pointer;
      }
    }
  }
}