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

// Base class
.tooltip
  position: absolute
  z-index: $zindex-tooltip
  display: block
  visibility: visible
  font-size: $font-size-small
  line-height: 1.4
  +opacity(0)
  &.in
    +opacity(0.9)
  &.top
    margin-top: -3px
    padding: $tooltip-arrow-width 0
  &.right
    margin-left: 3px
    padding: 0 $tooltip-arrow-width
  &.bottom
    margin-top: 3px
    padding: $tooltip-arrow-width 0
  &.left
    margin-left: -3px
    padding: 0 $tooltip-arrow-width

// Wrapper for the tooltip content
.tooltip-inner
  max-width: $tooltip-max-width
  padding: 3px 8px
  color: $tooltip-color
  text-align: center
  text-decoration: none
  background-color: $tooltip-bg
  border-radius: $border-radius-base

// 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: -$tooltip-arrow-width
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0
    border-top-color: $tooltip-arrow-color
  &.top-left .tooltip-arrow
    bottom: 0
    left: $tooltip-arrow-width
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0
    border-top-color: $tooltip-arrow-color
  &.top-right .tooltip-arrow
    bottom: 0
    right: $tooltip-arrow-width
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0
    border-top-color: $tooltip-arrow-color
  &.right .tooltip-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
  &.left .tooltip-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
  &.bottom .tooltip-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
  &.bottom-left .tooltip-arrow
    top: 0
    left: $tooltip-arrow-width
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width
    border-bottom-color: $tooltip-arrow-color
  &.bottom-right .tooltip-arrow
    top: 0
    right: $tooltip-arrow-width
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width
    border-bottom-color: $tooltip-arrow-color