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

@import "../common";

/**
 * Should be used in conjunction with the JavaScript Titon.Popover module.
 *
 *    <div class="popover">
 *        <div class="popover-inner">
 *            <div class="popover-head">Popover Title</div>
 *            <div class="popover-body">Popover Content</div>
 *        </div>
 *        <div class="popover-arrow"></div>
 *    </div>
 */

.popover {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 500;
    max-width: 300px;
    visibility: hidden;
    background: $gray;
    border: 1px solid $gray-dark;

    &.center-left .popover-arrow,
    &.center-right .popover-arrow {
        top: 50%;
        margin-top: -8px;
    }

    &.center-left .popover-arrow {
        border-left-color: #000;
        right: -16px;
    }

    &.center-right .popover-arrow {
        border-right-color: #000;
        left: -16px;
    }

    &.top-center .popover-arrow,
    &.bottom-center .popover-arrow {
        left: 50%;
        margin-left: -8px;
    }

    &.top-center .popover-arrow {
        border-top-color: #000;
        bottom: -16px;
    }

    &.bottom-center .popover-arrow {
        border-bottom-color: #000;
        top: -16px;
    }
}

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

.popover-arrow {
    width: 0;
    height: 0;
    border: 8px solid transparent;
    position: absolute;

    &:after {
        content: "";
        border: 6px solid transparent;
        position: absolute;
        top: -6px;
        left: -6px;
    }
}