// Adapted from https://github.com/react-component/tooltip/blob/3.4.2/assets/bootstrap.less

@import "../palette";
@import "../mixins/fontSize";

.rc-tooltip {

  // Setup

  $tooltip-arrow-width: em-calc(7px);
  $tooltip-distance: em-calc(9px);
  $tooltip-arrow-point-distance: calc(#{$tooltip-distance} - #{$tooltip-arrow-width});
  $tooltip-bg: $panel-background-color;
  $tooltip-border: $panel-border-color;
  $tooltip-border-width: em-calc(1px);

  position: absolute;
  z-index: 1;
  display: block;

  &-hidden {
    display: none;
  }

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

  // Arrow

  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    &::after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
  }

  &-placement-top &-arrow,
  &-placement-topLeft &-arrow,
  &-placement-topRight &-arrow {
    bottom: $tooltip-arrow-point-distance;
    margin-left: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
    border-top-color: $tooltip-border;
    &::after {
      bottom: $tooltip-border-width;
      margin-left: -$tooltip-arrow-width;
      border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
      border-top-color: $tooltip-bg;
    }
  }

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

  &-placement-topLeft &-arrow {
    left: 15%;
  }

  &-placement-topRight &-arrow {
    right: 15%;
  }

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

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

  &-placement-rightTop &-arrow {
    top: 15%;
    margin-top: 0;
  }

  &-placement-rightBottom &-arrow {
    bottom: 15%;
  }

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

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

  &-placement-leftTop &-arrow {
    top: 15%;
    margin-top: 0;
  }

  &-placement-leftBottom &-arrow {
    bottom: 15%;
  }

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

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

  &-placement-bottomLeft &-arrow {
    left: 15%;
  }

  &-placement-bottomRight &-arrow {
    right: 15%;
  }

  // Content

  &-inner {
    max-width: em-calc(350px);
    padding: em-calc(6px) em-calc(9px);
    background-color: $tooltip-bg;
    border: $tooltip-border-width solid $tooltip-border;
    border-radius: em-calc(4px);
    box-shadow: 0 4px em-calc(20px) rgba($dark-blue-color, 0.5);
    min-height: em-calc(34px);
  }

  &.rc-tooltip--stripped {
    .rc-tooltip-arrow { display: none; }
    .rc-tooltip-inner {
      padding: 0;
      border: none;
      background-color: transparent;
    }
  }

}