@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:             1;

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

// Base class
.@{tooltipPrefixClass} {
  position: absolute;
  z-index: 1070;
  display: block;
  visibility: visible;
  font-size: @font-size-base;
  line-height: 1.5;

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

// Wrapper for the tooltip content
.@{tooltipPrefixClass}-inner {
  max-width: @tooltip-max-width;
  padding: 7px 10px;
  color: @tooltip-color;
  text-align: left;
  text-decoration: none;
  background-color: @tooltip-bg;
  border-radius: 6px;
  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: 0;
    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: 0;
    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: 0;
    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: 0;
    left: 50%;
    margin-left: -@tooltip-arrow-width;
    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
    border-bottom-color: @tooltip-arrow-color;
  }
}