//
// Popovers
// --------------------------------------------------

.popover
  position: absolute
  top: 0
  left: 0
  z-index: $zindexPopover
  display: none
  width: 236px
  padding: 1px
  text-align: left
  // Reset given new insertion method
  background-color: $popoverBackground
  -webkit-background-clip: padding-box
  -moz-background-clip: padding
  background-clip: padding-box
  border: 1px solid #ccc
  border: 1px solid rgba(0, 0, 0, 0.2)
  +ctb-border-radius(6px)
  +ctb-box-shadow(0 5px 10px rgba(0, 0, 0, 0.2))
  // Overrides for proper insertion
  white-space: normal
  // Offset the popover to account for the popover arrow
  &.top
    margin-top: -10px
  &.right
    margin-left: 10px
  &.bottom
    margin-top: 10px
  &.left
    margin-left: -10px

.popover-title
  margin: 0
  // reset heading margin
  padding: 8px 14px
  font-size: 14px
  font-weight: normal
  line-height: 18px
  background-color: $popoverTitleBackground
  border-bottom: 1px solid darken($popoverTitleBackground, 5%)
  +ctb-border-radius(5px 5px 0 0)

.popover-content
  padding: 9px 14px

// Arrows
//
// .arrow is outer, .arrow:after is inner

.popover .arrow,
.popover .arrow:after
  position: absolute
  display: block
  width: 0
  height: 0
  border-color: transparent
  border-style: solid

.popover .arrow
  border-width: $popoverArrowOuterWidth

.popover .arrow:after
  border-width: $popoverArrowWidth
  content: ""

.popover
  &.top .arrow
    left: 50%
    margin-left: -$popoverArrowOuterWidth
    border-bottom-width: 0
    border-top-color: #999
    // IE8 fallback
    border-top-color: $popoverArrowOuterColor
    bottom: -$popoverArrowOuterWidth
    &:after
      bottom: 1px
      margin-left: -$popoverArrowWidth
      border-bottom-width: 0
      border-top-color: $popoverArrowColor
  &.right .arrow
    top: 50%
    left: -$popoverArrowOuterWidth
    margin-top: -$popoverArrowOuterWidth
    border-left-width: 0
    border-right-color: #999
    // IE8 fallback
    border-right-color: $popoverArrowOuterColor
    &:after
      left: 1px
      bottom: -$popoverArrowWidth
      border-left-width: 0
      border-right-color: $popoverArrowColor
  &.bottom .arrow
    left: 50%
    margin-left: -$popoverArrowOuterWidth
    border-top-width: 0
    border-bottom-color: #999
    // IE8 fallback
    border-bottom-color: $popoverArrowOuterColor
    top: -$popoverArrowOuterWidth
    &:after
      top: 1px
      margin-left: -$popoverArrowWidth
      border-top-width: 0
      border-bottom-color: $popoverArrowColor
  &.left .arrow
    top: 50%
    right: -$popoverArrowOuterWidth
    margin-top: -$popoverArrowOuterWidth
    border-right-width: 0
    border-left-color: #999
    // IE8 fallback
    border-left-color: $popoverArrowOuterColor
    &:after
      right: 1px
      border-right-width: 0
      border-left-color: $popoverArrowColor
      bottom: -$popoverArrowWidth