@import "../../../../lib/style/themes/default";
@import "../../../../lib/style/mixins/index";

@tooltip-prefix-cls: ~"@{c7n-pro-prefix}-tooltip";

@square-root-two: 1.414;

// Base class
.@{tooltip-prefix-cls}-popup {
  .reset-component;
  position: absolute;
  z-index: -1;
  display: block;
  visibility: visible;
  box-shadow: none;
  white-space: nowrap;
  background-color: transparent;
  filter: drop-shadow(0 .01rem .01rem rgba(0, 0, 0, 0.20));
  border-radius: .04rem;

  &-hidden {
    display: none;
  }

  // Wrapper for the tooltip content
  &-inner {
    // max-width: @tooltip-max-width;
    position: relative;
    padding: .06rem .08rem;
    text-align: left;
    text-decoration: none;
    min-height: .32rem;
    box-shadow:
    0 .01rem .03rem 0 rgba(0, 0, 0, 0.20),
    0 .01rem .01rem 0 rgba(0, 0, 0, 0.14),
    0 .02rem .01rem -0.01rem rgba(0, 0, 0, 0.12);
    border-radius: .04rem;

    &-dark {
      color: @tooltip-color;
      background-color: @tooltip-bg;
    }

    &-light {
      color: @tooltip-color-light;
      background-color: @tooltip-bg-light;
    }
  }

  // Arrows
  &-arrow {
    position: absolute;
    width: @tooltip-arrow-width;
    height: @tooltip-arrow-width;
    background-color: @tooltip-bg;
    z-index: @zindex-tooltip + 1;

    // 暗色主题用border实现箭头
    // 因为背景色有透明度, 无法使用两个div互相覆盖的方法
    // TODO: 使用div + rotate + border, 利用父元素的filter实现阴影效果
    &-dark {
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: @tooltip-arrow-width / @square-root-two;
      border-bottom-color: @tooltip-arrow-color;
      border-left-color: @tooltip-arrow-color;
      background-color: transparent;
      transform-origin: 0 0;
    }

    // 两色主题用div和transform: rotate()实现箭头, 前后覆盖
    // 因为需要的阴影效果要加在底部,
    // 因此当placement为top*时也要保证底部阴影对顶部的效果, 需要一个完整的div
    &-light {
      width: @tooltip-arrow-width * @square-root-two;
      height: @tooltip-arrow-width * @square-root-two;
    }
  }

  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow {

    &-dark {
      bottom: -@tooltip-arrow-width * @square-root-two;
      transform: translateX(-50%) rotate(-45deg);
    }

    &-light {
      bottom: 0;
      transform: translate(-50%, 50%) rotate(45deg);
      background-color: @tooltip-arrow-color-light;
    }
  }

  &-placement-top &-arrow {
    left: 50%;
  }

  &-placement-topLeft &-arrow {
    left: .16rem;
  }

  &-placement-topRight &-arrow {
    right: .16rem;
  }

  &-placement-right &-arrow,
  &-placement-rightTop &-arrow,
  &-placement-rightBottom &-arrow {

    &-dark {
      transform: translateY(-@tooltip-arrow-width) rotate(45deg);
    }

    &-light {
      transform: translate(-50%, -50%) rotate(-45deg);
      background-color: @tooltip-arrow-color-light;
    }
  }

  &-placement-right &-arrow {
    top: 50%;
  }

  &-placement-rightTop &-arrow {
    top: 35%;
  }

  &-placement-rightBottom &-arrow {
    top: 65%;
  }

  &-placement-left &-arrow,
  &-placement-leftTop &-arrow,
  &-placement-leftBottom &-arrow {

    &-dark {
      right: -@tooltip-arrow-width * @square-root-two;
      transform: translateY(@tooltip-arrow-width) rotate(-135deg);
    }

    &-light {
      transform: translate(50%, -50%) rotate(45deg);
      right: 0;
      background-color: @tooltip-arrow-color-light;
    }
  }

  &-placement-left &-arrow {
    top: 50%;
  }

  &-placement-leftTop &-arrow {
    top: 35%;
  }

  &-placement-leftBottom &-arrow {
    top: 65%;
  }

  &-placement-bottom &-arrow,
  &-placement-bottomLeft &-arrow,
  &-placement-bottomRight &-arrow {
    &-dark {
      transform: translateX(50%) rotate(135deg);
    }

    &-light {
      transform: translate(-50%, -50%) rotate(45deg);
      background-color: @tooltip-arrow-color-light;
    }
  }

  &-placement-bottom &-arrow {
    left: 50%;
  }

  &-placement-bottomLeft &-arrow {
    left: .16rem;
  }

  &-placement-bottomRight &-arrow {
    right: .16rem;
  }
}