.popover {
    display: block;
    // Allow breaking very long words so they don't overflow the popover's bounds
    word-wrap: break-word;

    // Popover directions

    &.popover-top,
    &.bs-tether-element-attached-bottom {
        margin-top: -$popover-arrow-width;

        &::before,
        &::after {
            left: 50%;
            border-bottom-width: 0;
        }

        &::before {
            bottom: -$popover-arrow-outer-width;
            margin-left: -$popover-arrow-outer-width;
            border-top-color: $popover-arrow-outer-color;
        }

        &::after {
            bottom: -($popover-arrow-outer-width - 1);
            margin-left: -$popover-arrow-width;
            border-top-color: $popover-arrow-color;
        }
    }

    &.popover-right,
    &.bs-tether-element-attached-left {
        margin-left: $popover-arrow-width;

        &::before,
        &::after {
            top: 50%;
            border-left-width: 0;
        }

        &::before {
            left: -$popover-arrow-outer-width;
            margin-top: -$popover-arrow-outer-width;
            border-right-color: $popover-arrow-outer-color;
        }

        &::after {
            left: -($popover-arrow-outer-width - 1);
            margin-top: -($popover-arrow-outer-width - 1);
            border-right-color: $popover-arrow-color;
        }
    }

    &.popover-bottom,
    &.bs-tether-element-attached-top {
        margin-top: $popover-arrow-width;

        &::before,
        &::after {
            left: 50%;
            border-top-width: 0;
        }

        &::before {
            top: -$popover-arrow-outer-width;
            margin-left: -$popover-arrow-outer-width;
            border-bottom-color: $popover-arrow-outer-color;
        }

        &::after {
            top: -($popover-arrow-outer-width - 1);
            margin-left: -$popover-arrow-width;
            border-bottom-color: $popover-title-bg;
        }

        // This will remove the popover-title's border just below the arrow
        .popover-title::before {
            position: absolute;
            top: 0;
            left: 50%;
            display: block;
            width: 20px;
            margin-left: -10px;
            content: "";
            border-bottom: 1px solid $popover-title-bg;
        }
    }

    &.popover-left,
    &.bs-tether-element-attached-right {
        margin-left: -$popover-arrow-width;

        &::before,
        &::after {
            top: 50%;
            border-right-width: 0;
        }

        &::before {
            right: -$popover-arrow-outer-width;
            margin-top: -$popover-arrow-outer-width;
            border-left-color: $popover-arrow-outer-color;
        }

        &::after {
            right: -($popover-arrow-outer-width - 1);
            margin-top: -($popover-arrow-outer-width - 1);
            border-left-color: $popover-arrow-color;
        }
    }
}


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

.popover::before,
.popover::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover::before {
    content: "";
    border-width: $popover-arrow-outer-width;
}
.popover::after {
    content: "";
    border-width: $popover-arrow-width;
}