$popover-bg: #757575 !default;
$popover-inner-padding: 1.2rem !default;
$zindex-popover: 1060 !default;
$popover-arrow-width: 2.2rem !default;
$popover-arrow-height: 1.1rem !default;
$popover-arrow-outer-width: ($popover-arrow-width + 0.1rem) !default;
$popover-arrow-outer-color: fade-in($popover-bg, .05) !default;
$popover-arrow-color: $popover-bg !default;
$popover-header-bg: darken($popover-bg, 3%) !default;
$popover-border-width: 0rem !default;
$popover-border-color: black !default;
$popover-border-radius: 0rem !default;
$popover-box-shadow: 0 .25rem .5rem rgba(black, .2) !default;
$popover-body-color: white !default;
$popover-body-font-size: 1rem !default;
$popover-header-color: white !default;
$popover-header-font-size: 1.6rem !default;
$popover-target-offset: 0.5rem !default;
$font-family: 'Helvetica' !default;

@mixin fix-arrow-position-for-retina($direction) {
    .arrow {
        &:before, &:after {
            #{$direction}: 0px !important;   // Fix visual gap on retina displays
        }
    }
}

.popover {
    .virtual-area {
        height: 11px;
        width: 100%;
        position: absolute;
    }
    &.bs-popover-top .virtual-area {
        bottom: -11px;
    }
    &.bs-popover-bottom .virtual-area {
        top: -11px;
    }
    &.bs-popover-left .virtual-area {
        right: -11px;
    }
    &.bs-popover-right .virtual-area {
        left: -11px;
    }
}

.popover.popover-content {
    background-color: $popover-bg;
    border: $popover-border-width solid $popover-border-color;;
    padding: $popover-inner-padding;
    z-index: $zindex-popover;
    max-width: none;
    border-radius: $popover-border-radius;
    box-shadow: $popover-box-shadow;
    font-family: $font-family;

    .arrow {
        position: absolute;
        display: block;
        width: $popover-arrow-width;
        height: $popover-arrow-height;
        margin: 0 !important;

        &::before,
        &::after {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
        }
    }
    &.sm {
        width: 20rem;
    }

    &.md-sm {
        width: 26rem;
    }

    &.md {
        width: 34rem;
    }

    &.lg {
        width: 40rem;
    }

    .popover-header {
        color: $popover-header-color;
        font-size: $popover-header-font-size;
        font-weight: bold;
        line-height: 2.1rem;
    }

    .popover-body {
        color: $popover-body-color;
        font-size: $popover-body-font-size;
        line-height: 1.3rem;
    }

    &.bs-popover {
        // These margins all define distance from the target to render
        &-left {
            margin-left: calc(-#{$popover-arrow-height} - #{$popover-target-offset});
            @include fix-arrow-position-for-retina(right);
        }
        &-right {
            margin-left: calc(#{$popover-arrow-height} + #{$popover-target-offset});
            @include fix-arrow-position-for-retina(left);
        }
        &-top, &-top-right, &-top-left {
            margin-top: calc(-#{$popover-arrow-height} - #{$popover-target-offset});
            @include fix-arrow-position-for-retina(bottom);
        }
        &-bottom, &-bottom-right, &-bottom-left {
            margin-top: calc(#{$popover-arrow-height} + #{$popover-target-offset});
            @include fix-arrow-position-for-retina(top);
        }

        &-right, &-left {
            .arrow {
                top: 50%;
                transform: translateY(-50%);
            }
        }

        &-top, &-bottom {
            .arrow {
                left: 50%;
                transform: translateX(-50%);
            }
        }

        &-right {
            .arrow {
                left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
                width: $popover-arrow-height;
                height: $popover-arrow-width;
                margin: 0 !important;
            }

            .arrow::before,
            .arrow::after {
                border-width: calc(#{$popover-arrow-width} / 2) $popover-arrow-height calc(#{$popover-arrow-width} / 2) 0;
            }

            .arrow::before {
                left: 0;
                border-right-color: $popover-arrow-outer-color;
            }

            .arrow::after {
                left: $popover-border-width !important;
                border-right-color: $popover-arrow-color;
            }
        }

        &-left {
            .arrow {
                right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
                width: $popover-arrow-height;
                height: $popover-arrow-width;
                margin: 0 !important;
            }

            .arrow::before,
            .arrow::after {
                border-width: calc(#{$popover-arrow-width} / 2) 0 calc(#{$popover-arrow-width} / 2) $popover-arrow-height;
            }

            .arrow::before {
                right: 0;
                border-left-color: $popover-arrow-outer-color;
            }

            .arrow::after {
                right: $popover-border-width !important;
                border-left-color: $popover-arrow-color;
            }
        }

        &-top, &-top-right, &-top-left {
            .arrow {
                bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
            }

            .arrow::before,
            .arrow::after {
                border-width: $popover-arrow-height calc(#{$popover-arrow-width} / 2) 0;
            }

            .arrow::before {
                bottom: 0;
                border-top-color: $popover-arrow-outer-color;
            }

            .arrow::after {
                bottom: $popover-border-width !important;
                border-top-color: $popover-arrow-color;
            }
        }

        &-bottom, &-bottom-right, &-bottom-left {
            .arrow {
                top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
            }

            .arrow::before,
            .arrow::after {
                border-width: 0 calc(#{$popover-arrow-width} / 2) $popover-arrow-height calc(#{$popover-arrow-width} / 2);
            }

            .arrow::before {
                top: 0;
                border-bottom-color: $popover-arrow-outer-color;
            }

            .arrow::after {
                top: $popover-border-width !important;
                border-bottom-color: $popover-arrow-color;
            }

            // This will remove the popover-header's border just below the arrow
            .popover-header::before {
                position: absolute;
                top: 0;
                left: 50%;
                display: block;
                width: $popover-arrow-width;
                margin-left: calc(#{$popover-arrow-width} / -2);
                content: "";
                border-bottom: $popover-border-width solid $popover-header-bg;
            }
        }

        &-top-right, &-bottom-right {
            transform: translateX(-2rem);
            .arrow {
                left: 0.9rem;
            }
        }

        &-top-left, &-bottom-left {
            transform: translateX(2rem);
            .arrow {
                right: 0.9rem;
            }
        }
    }
}