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

// Base class
.tooltip
  position: absolute
  z-index: $zindexTooltip
  display: block
  visibility: visible
  font-size: 11px
  line-height: 1.4
  +ctb-opacity(0)
  &.in
    +ctb-opacity(80)
  &.top
    margin-top: -3px
    padding: 5px 0
  &.right
    margin-left: 3px
    padding: 0 5px
  &.bottom
    margin-top: 3px
    padding: 5px 0
  &.left
    margin-left: -3px
    padding: 0 5px

// Wrapper for the tooltip content
.tooltip-inner
  max-width: 200px
  padding: 8px
  color: $tooltipColor
  text-align: center
  text-decoration: none
  background-color: $tooltipBackground
  +ctb-border-radius($baseBorderRadius)

// Arrows
.tooltip-arrow
  position: absolute
  width: 0
  height: 0
  border-color: transparent
  border-style: solid

.tooltip
  &.top .tooltip-arrow
    bottom: 0
    left: 50%
    margin-left: -$tooltipArrowWidth
    border-width: $tooltipArrowWidth $tooltipArrowWidth 0
    border-top-color: $tooltipArrowColor
  &.right .tooltip-arrow
    top: 50%
    left: 0
    margin-top: -$tooltipArrowWidth
    border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0
    border-right-color: $tooltipArrowColor
  &.left .tooltip-arrow
    top: 50%
    right: 0
    margin-top: -$tooltipArrowWidth
    border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth
    border-left-color: $tooltipArrowColor
  &.bottom .tooltip-arrow
    top: 0
    left: 50%
    margin-left: -$tooltipArrowWidth
    border-width: 0 $tooltipArrowWidth $tooltipArrowWidth
    border-bottom-color: $tooltipArrowColor