@import "../lib.less";

.@{veui-prefix}-popover-box {
  @arrow-size: @dls-tooltip-arrow-width;
  @arrow-indent: @dls-popover-arrow-spacing;

  .@{veui-prefix}-tooltip {
    max-width: @dls-popover-max-width;
    line-height: @dls-popover-line-height;
    padding: 0;
    border: 0.1px solid transparent;

    .@{veui-prefix}-tooltip-content {
      overflow: auto;
      margin: @dls-popover-padding-y @dls-popover-padding-x;
    }

    @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~="s"] {
      border-radius: @dls-popover-border-radius-s;
      font-size: @dls-popover-font-size-s;
    }

    &[ui~="m"] {
      border-radius: @dls-popover-border-radius-m;
      font-size: @dls-popover-font-size-m;
    }
  }
}