/**
 * @copyright   2010-2013, The Titon Project
 * @license     http://opensource.org/licenses/bsd-license.php
 * @link        http://titon.io
 */

@import "../common";

$popover-arrow-width-double: ($popover-arrow-width * 2);
$popover-arrow-width-shadow: ($popover-arrow-width - 2);

.#{$vendor-prefix}popover {
    position: absolute;
    top: 0;
    left: 0;
    margin: $margin;
    padding: 0;
    border: 0;
    z-index: 500;
    max-width: 300px;
    visibility: hidden;

    &.center-left .#{$vendor-prefix}popover-arrow,
    &.center-right .#{$vendor-prefix}popover-arrow {
        top: 50%;
        margin-top: -#{$popover-arrow-width}px;
    }

    &.center-left .#{$vendor-prefix}popover-arrow {
        border-left-color: $gray;
        right: -#{$popover-arrow-width-double}px;
    }

    &.center-right .#{$vendor-prefix}popover-arrow {
        border-right-color: $gray;
        left: -#{$popover-arrow-width-double}px;
    }

    &.top-center .#{$vendor-prefix}popover-arrow,
    &.bottom-center .#{$vendor-prefix}popover-arrow {
        left: 50%;
        margin-left: -#{$popover-arrow-width}px;
    }

    &.top-center .#{$vendor-prefix}popover-arrow {
        border-top-color: $gray;
        bottom: -#{$popover-arrow-width-double}px;
    }

    &.bottom-center .#{$vendor-prefix}popover-arrow {
        border-bottom-color: $gray;
        top: -#{$popover-arrow-width-double}px;
    }
}

.#{$vendor-prefix}popover-head,
.#{$vendor-prefix}popover-body {
    padding: $small-padding;
}

.#{$vendor-prefix}popover-arrow {
    border: #{$popover-arrow-width}px solid transparent;

    &:after {
        border: #{$popover-arrow-width-shadow}px solid transparent;
        top: -#{$popover-arrow-width-shadow}px;
        left: -#{$popover-arrow-width-shadow}px;
    }
}