@import "../mixins/index";
@tooltipPrefixClass: ~"@{css-prefix}tooltip";

//
// Tooltips
// --------------------------------------------------

//** Tooltip max width
@tooltip-max-width:           250px;
//** Tooltip text color
@tooltip-color:               #fff;
//** Tooltip background color
@tooltip-bg:                  #373737;
@tooltip-opacity:             0.9;

//** Tooltip arrow width
@tooltip-arrow-width:         5px;
//** Tooltip arrow color
@tooltip-distance:            @tooltip-arrow-width+4;
//** Tooltip arrow color
@tooltip-arrow-color:         @tooltip-bg;

// Base class
.@{tooltipPrefixClass} {
  position: absolute;
  z-index: 1070;
  display: block;
  visibility: visible;
  left: -9999px;
  top: -9999px;
  font-size: @font-size-base;
  line-height: @line-height-base;
  opacity: @tooltip-opacity;

  &-placement-top    { padding: @tooltip-arrow-width 0 @tooltip-distance 0; }
  &-placement-right  { padding: 0 @tooltip-arrow-width 0 @tooltip-distance; }
  &-placement-bottom { padding: @tooltip-distance 0 @tooltip-arrow-width 0; }
  &-placement-left   { padding: 0 @tooltip-distance 0 @tooltip-arrow-width; }
}

// Wrapper for the tooltip content
.@{tooltipPrefixClass}-inner {
  max-width: @tooltip-max-width;
  padding: 8px 10px;
  color: @tooltip-color;
  text-align: left;
  text-decoration: none;
  background-color: @tooltip-bg;
  border-radius: @border-radius-base;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

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

.@{tooltipPrefixClass} {
  &-placement-top &-arrow {
    bottom: @tooltip-distance - @tooltip-arrow-width;
    left: 50%;
    margin-left: -@tooltip-arrow-width;
    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
    border-top-color: @tooltip-arrow-color;
  }
  &-placement-right &-arrow {
    top: 50%;
    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 {
    top: 50%;
    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 {
    top: @tooltip-distance - @tooltip-arrow-width;
    left: 50%;
    margin-left: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
}