@import "../lib.less";
@import "../variables/components/tooltip.less";

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

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

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

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

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

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

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

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

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

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

  @arrow-offset: 8px;

  .make-align(@side) {
    &-aim-center {
      margin-@{side}: veui-sum(-@arrow-offset, -@veui-tooltip-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% - @veui-tooltip-arrow-size / 2);
    }
  }

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

  [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~="white"] {
    background-color: @veui-tooltip-background-color-reverse;
    color: @veui-tooltip-font-color-reverse;
    box-shadow: @veui-tooltip-shadow-reverse;

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

      &::after {
        box-shadow: 0 0 @veui-shadow-blur-radius
          fade(@veui-shadow-color, percentage(@veui-shadow-opacity));
      }
    }
  }

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