//** Popover body background color
$popover-bg:                        #fff;

$popover-inverse-bg:				#777;

$popover-inverse-color:				#eee;
//** Popover maximum width
$popover-width:                   	435px;

$popover-min-height:                  50px;

//** Popover border color
$popover-border-color:                rgba(0,0,0,.1);
//** Popover fallback border color
$popover-fallback-border-color:       #eee;

//** Popover title background color
$popover-title-bg:                    darken($popover-bg, 3%);
$popover-inverse-title-bg:            lighten($popover-inverse-bg, 3%);

//** Popover arrow width
$popover-arrow-width:                 10px;
//** Popover arrow color
$popover-arrow-color:                 #fff;

//** Popover outer arrow width
$popover-arrow-outer-width:           ($popover-arrow-width + 1);
//** Popover outer arrow color
$popover-arrow-outer-color:           opacify($popover-border-color, 0.05);
//** Popover outer arrow fallback color
$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%);

$border-radius-base:        4px;
$border-radius-large:       6px;
$border-radius-small:       3px;

$font-size-base:          14px;
$font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
$font-size-small:         ceil(($font-size-base * 0.85)); // ~12px

$close-size:                20px;
$close-color:               #000;

/*  webui popover  */
#g5-container {
    .g5-popover {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1020;
        display: none;
        //width: $popover-width; // this is not accurate when using auto width
        min-height:$popover-min-height;
        padding: 1px;
        text-align: left;
        white-space: normal;
        background-color: $popover-bg;
        background-clip: padding-box;
        border: 1px solid $popover-fallback-border-color;
        border: 1px solid $popover-border-color;
        border-radius: $border-radius-large;
        box-shadow: 0 2px 6px rgba(0,0,0,.15);
        color: $core-text;
        outline: transparent;

        &.top,&.top-left,&.top-right     { margin-top: -$popover-arrow-width; }
        &.right,&.right-top,&.right-bottom   { margin-left: $popover-arrow-width; }
        &.bottom,&.bottom-left,&.bottom-right { margin-top: $popover-arrow-width; }
        &.left,&.left-top,&.left-bottom    { margin-left: -$popover-arrow-width; }



        input[type="checkbox"], input[type="radio"] {
            margin: 0 5px 0 0;
            display: inline-block;
            vertical-align: middle;
        }

        // addons
        &.g5-popover-above-modal {
            z-index: 1500;
        }

        &.g5-popover-nooverflow {
            .g5-popover-content {
                overflow: visible;
            }
        }

        &.g5-popover-font-preview {
            color: #333;
            ul, li {
                @extend %list-reset;
            }

            li {
                padding: 4px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: pre;
            }
        }
    }

    .g5-popover-inner .close{
        font-family: arial;
        margin:5px 10px 0 0;
        float: right;
        font-size: $close-size;
        font-weight: bold;
        line-height: $close-size;
        color: $close-color;
        text-shadow: 0 1px 0 #fff;
        opacity: 0.2;
        text-decoration: none;
        &:hover,&:focus{
            opacity: 0.5;
        }
    }

    .g5-popover-title {
        padding: 8px 14px;
        margin: 0;
        font-size: $font-size-base;
        font-weight: normal;
        line-height: 18px;
        background-color: $popover-title-bg;
        border-bottom: 1px solid darken($popover-title-bg, 5%);
        border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
    }

    .g5-popover-content {
        padding: 9px 14px;
        overflow: auto;
    }

    .g5-popover-inverse {
        background-color:$popover-inverse-bg;
        color:$popover-inverse-color;

        .g5-popover-title {
            background: $popover-inverse-title-bg;
            border-bottom: none;
            color:$popover-inverse-color;
        }
    }

    .g5-popover-no-padding {
        .g5-popover-content {
            padding: 0;
        }
        .list-group-item{
            border-right: none;
            border-left:none;
            &:first-child{
                border-top:0;
            }
            &:last-child{
                border-bottom:0;
            }
        }
    }

    .g5-popover > .g-arrow{
        &,&:after{
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
        }
    }

    .g5-popover > .g-arrow {
        border-width: $popover-arrow-outer-width;
    }
    .g5-popover > .g-arrow:after {
        border-width: $popover-arrow-width;
        content: "";
    }

    .g5-popover{
        &.top >.g-arrow,
        &.top-right >.g-arrow,
        &.top-left >.g-arrow
        {
            bottom: -$popover-arrow-outer-width;
            left: 50%;
            margin-left: -$popover-arrow-outer-width;
            border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
            border-top-color: $popover-arrow-outer-color;
            border-bottom-width: 0;
            &:after{
                content: " ";
                bottom: 1px;
                margin-left: -$popover-arrow-width;
                border-top-color: $popover-arrow-color;
                border-bottom-width: 0;
            }
        }
        &.right > .g-arrow,
        &.right-top > .g-arrow,
        &.right-bottom > .g-arrow {
            top: 50%;
            left: -$popover-arrow-outer-width;
            margin-top: -$popover-arrow-outer-width;
            border-left-width: 0;
            border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
            border-right-color: $popover-arrow-outer-color;
            &:after {
                content: " ";
                left: 1px;
                bottom: -$popover-arrow-width;
                border-left-width: 0;
                border-right-color: $popover-arrow-color;
            }
        }
        &.bottom >.g-arrow,
        &.bottom-right >.g-arrow,
        &.bottom-left >.g-arrow
        {
            top: -$popover-arrow-outer-width;
            left: 50%;
            margin-left: -$popover-arrow-outer-width;
            border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
            border-bottom-color: $popover-arrow-outer-color;
            border-top-width: 0;
            &:after{
                content: " ";
                top: 1px;
                margin-left: -$popover-arrow-width;
                border-bottom-color: $popover-arrow-color;
                border-top-width: 0;
            }
        }
        &.left > .g-arrow,
        &.left-top > .g-arrow,
        &.left-bottom > .g-arrow {
            top: 50%;
            right: -$popover-arrow-outer-width;
            margin-top: -$popover-arrow-outer-width;
            border-right-width: 0;
            border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
            border-left-color: $popover-arrow-outer-color;
            &:after {
                content: " ";
                right: 1px;
                border-right-width: 0;
                border-left-color: $popover-arrow-color;
                bottom: -$popover-arrow-width;
            }
        }
    }

    .g5-popover-inverse{
        &.top > .g-arrow,
        &.top-left > .g-arrow,
        &.top-right > .g-arrow{
            &,&:after{
                border-top-color: $popover-inverse-bg;
            }
        }
        &.right > .g-arrow,
        &.right-top > .g-arrow,
        &.right-bottom > .g-arrow{
            &,&:after{
                border-right-color: $popover-inverse-bg;
            }
        }
        &.bottom > .g-arrow,
        &.bottom-left > .g-arrow,
        &.bottom-right > .g-arrow{
            &,&:after{
                border-bottom-color: $popover-inverse-bg;
            }
        }
        &.left > .g-arrow,
        &.left-top > .g-arrow,
        &.left-bottom > .g-arrow{
            &,&:after{
                border-left-color: $popover-inverse-bg;
            }
        }
    }

    .g5-popover i.icon-refresh:before{
        content: "";
    }

    .g5-popover i.icon-refresh{
        display: block;
        width:30px;
        height:30px;
        font-size: 20px;
        top:50%;
        left:50%;
        position: absolute;
    }

    // Generic popovers
    .g5-popover-generic {
        ul {
            @extend %list-reset;
        }

        a {
            display: block;
            padding: 0.4rem;
            color: $core-text !important;

            &:hover {
                color: $core-text !important;
                background-color: #eee;
                border-radius: $border-radius-base;
            }

            &:focus {
                outline: auto;
            }
        }
    }

    // Extras
    .g5-popover-extras {
        ul {
            @extend %list-reset;
        }

        a, [data-g-devprod] {
            display: block;
            padding: 0.4rem;
            color: $core-text !important;

            &:hover {
                color: $core-text !important;
                background-color: #eee;
                border-radius: $border-radius-base;
            }

            &:focus {
                outline: auto;
            }
        }
    }
}