// POPOVERS
// --------

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: @zindexPopover;
  display: none;
  width: 218px;
  background-color: #fff;
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  .border-radius(6px);
  .box-shadow(0 5px 10px rgba(0,0,0,.2));

  // Offset the popover to account for the popover arrow
  &.top     { margin-bottom: 10px; }
  &.right   { margin-left: 10px; }
  &.bottom  { margin-top: 10px; }
  &.left    { margin-right: 10px; }

  // Call the mixin for the arrows
  &.top .arrow    { #popoverArrow > .top(); }
  &.right .arrow  { #popoverArrow > .right(); }
  &.bottom .arrow { #popoverArrow > .bottom(); }
  &.left .arrow   { #popoverArrow > .left();  }

  // Common arrow styles
  .arrow {
    position: absolute;
    width: 0;
    height: 0;
    &:after {
      position: absolute;
      display: inline-block;
      width: 0;
      height: 0;
      content: "";
    }
  }
}

.popover-title {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  .border-radius(5px 5px 0 0);
}

.popover-content {
  padding: 9px 14px;
  p, ul, ol {
    margin-bottom: 0;
  }
}