@import "../lib.less";

.@{veui-prefix}-tooltip {
  @arrow-size: @dls-tooltip-arrow-width;
  @arrow-side: @arrow-size / sqrt(2);
  @arrow-indent: @dls-tooltip-arrow-spacing;
  @gap: @dls-tooltip-target-spacing + @arrow-size / 2;

  position: relative;
  padding: @dls-tooltip-padding-y @dls-tooltip-padding-x;
  background-color: @dls-tooltip-background-color-normal;
  color: @dls-tooltip-font-color-normal;
  line-height: @dls-tooltip-line-height;
  border-radius: @dls-tooltip-border-radius;
  max-width: @dls-tooltip-max-width;
  font-size: @dls-tooltip-font-size;
  box-shadow: @dls-tooltip-shadow-normal;
  pointer-events: all;

  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;

  &-box-transparent {
    pointer-events: none;
  }

  &-arrow {
    .size(@arrow-size * 2);
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    color: @dls-tooltip-background-color-normal;

    &::after {
      content: "";
      display: block;
      position: absolute;
      .size(@arrow-side);
      background-color: currentColor;
      transform: translateX(-50%) rotateZ(45deg);
      top: @arrow-size * (1 - sqrt(2));
      left: 50%;
      pointer-events: all;
      box-shadow: @dls-tooltip-shadow-normal;
    }
  }

  .make-side(top) {
    .@{veui-prefix}-tooltip-arrow {
      bottom: -@arrow-size * 2;
    }
  }
  .make-side(right) {
    .@{veui-prefix}-tooltip-arrow {
      left: -@arrow-size * 2;
      transform: rotate(90deg);
    }
  }
  .make-side(bottom) {
    .@{veui-prefix}-tooltip-arrow {
      top: -@arrow-size * 2;
      transform: rotate(180deg);
    }
  }
  .make-side(left) {
    .@{veui-prefix}-tooltip-arrow {
      right: -@arrow-size * 2;
      transform: rotate(-90deg);
    }
  }

  [x-placement*="top"] & {
    margin-bottom: @gap;
    .make-side(top);
  }

  [x-placement*="right"] & {
    margin-left: @gap;
    .make-side(right);
  }

  [x-placement*="bottom"] & {
    margin-top: @gap;
    .make-side(bottom);
  }

  [x-placement*="left"] & {
    margin-right: @gap;
    .make-side(left);
  }

  @arrow-offset: @arrow-indent - @arrow-size / 2;

  .make-align(top) {
    &-arrow {
      top: @arrow-offset;
    }
  }
  .make-align(right) {
    &-arrow {
      right: @arrow-offset;
      left: auto;
    }
  }
  .make-align(bottom) {
    &-arrow {
      top: auto;
      bottom: @arrow-offset;
    }
  }
  .make-align(left) {
    &-arrow {
      left: @arrow-offset;
    }
  }

  [x-placement*="top"] &,
  [x-placement*="bottom"] & {
    &-arrow {
      left: calc(50% - @arrow-size);
    }
  }

  [x-placement*="right"] &,
  [x-placement*="left"] & {
    &-arrow {
      top: calc(50% - @arrow-size);
    }
  }

  [x-placement="right-start"] &,
  [x-placement="left-start"] & {
    .make-align(top);
  }

  [x-placement="top-end"] &,
  [x-placement="bottom-end"] & {
    .make-align(right);
  }

  [x-placement="right-end"] &,
  [x-placement="left-end"] & {
    .make-align(bottom);
  }

  [x-placement="top-start"] &,
  [x-placement="bottom-start"] & {
    .make-align(left);
  }

  &[ui~="reverse"] {
    background-color: @dls-tooltip-background-color-reverse;
    color: @dls-tooltip-font-color-reverse;
    box-shadow: @dls-tooltip-shadow-reverse;

    .@{veui-prefix}-tooltip-arrow {
      color: @dls-tooltip-background-color-reverse;

      &::after {
        box-shadow: @dls-tooltip-background-color-reverse;
      }
    }
  }

  &-box {
    pointer-events: none;
  }
}