@import './theme.less';

@tooltip-prefix: ~'@{icecream-prefix}-tooltip';

@tooltip-arrow-width: 5px;
// tooltip 到 child 的距离
@tooltip-distance: @tooltip-arrow-width + 4px;
@tooltip-color: @icecream-color-grey-1;
@tooltip-bg-color: @icecream-theme-tooltip-color;
@tooltip-arrow-color: @icecream-theme-tooltip-color;
@tooltip-max-width: 212px;

// Base class
.@{tooltip-prefix} {
  position: absolute;
  z-index: @icecream-z-index-popup;
  display: block;
  max-width: @tooltip-max-width;
  .setFontSize(@icecream-font-size-sm);

  &-hidden {
    display: none;
  }

  &-placement-top,
  &-placement-topLeft,
  &-placement-topRight {
    padding-bottom: @tooltip-distance;
  }
  &-placement-right,
  &-placement-rightTop,
  &-placement-rightBottom {
    padding-left: @tooltip-distance;
  }
  &-placement-bottom,
  &-placement-bottomLeft,
  &-placement-bottomRight {
    padding-top: @tooltip-distance;
  }
  &-placement-left,
  &-placement-leftTop,
  &-placement-leftBottom {
    padding-right: @tooltip-distance;
  }
}

// Wrapper for the tooltip content
.@{tooltip-prefix}-inner {
  padding: 7px 8px;
  color: @tooltip-color;
  text-align: left;
  text-decoration: none;
  // word-break 的兼容 ie 版本
  overflow-wrap: break-word;
  background-color: @tooltip-bg-color;
  border-radius: @icecream-border-radius;
  box-shadow: @icecream-box-shadow-md;
}

// Arrows
.@{tooltip-prefix}-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.@{tooltip-prefix} {
  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow {
    margin-bottom: @tooltip-distance - @tooltip-arrow-width;
    margin-left: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }

  &-placement-right &-arrow,
  &-placement-rightTop &-arrow,
  &-placement-rightBottom &-arrow {
    margin-left: @tooltip-distance - @tooltip-arrow-width;
    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
    border-right-color: @tooltip-arrow-color;
  }

  &-placement-left &-arrow,
  &-placement-leftTop &-arrow,
  &-placement-leftBottom &-arrow {
    margin-right: @tooltip-distance - @tooltip-arrow-width;
    margin-top: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-left-color: @tooltip-arrow-color;
  }

  &-placement-bottom &-arrow,
  &-placement-bottomLeft &-arrow,
  &-placement-bottomRight &-arrow {
    margin-top: @tooltip-distance - @tooltip-arrow-width;
    margin-left: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
}