#tooltip-container {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
}

@tooltipHeight: 156px / 2;
@wingWidth: 42px / 2;

.tooltip-wrap {
  position: absolute;
  display: none;
  // Position and display are set by React

  background: #fff;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.19), inset 0px 0px 1px rgba(0,0,0,0.5);
  border-radius: @border-radius-base;
  color: @text-color;

  font-weight: @font-weight-normal;
  text-align: center;
  text-transform: capitalize;

  .tooltip-content {
    padding: 0.5em;
  }

  .tooltip-pointer {
    position: absolute;
    width: 22.5px;
    height: 10px;
    background: transparent url('images/tooltip/tooltip-bg-pointer@2x.png') no-repeat;
    background-size: 22.5px 10.5px;
    margin-left: -11.2px;
  }

  &.above {
    .tooltip-pointer {
      transform: rotate(0deg);
      bottom: -9px;
    }
  }
  &.below {
    .tooltip-pointer {
      transform: rotate(180deg);
      top: -9px;
    }
  }
}