//
// Popover
// --------------------------------------------------

@color-popover-bg:                           @popup-bg;
@color-popover-border:                       rgba(0,0,0,.15);
@color-popover-head-bg:                      @popup-bg; // @tertiary-bg
@color-popover-head-text:                    @primary-color;
@color-popover-danger-bg:                    #ab2a1c;

div.control-popover {
    position: absolute;
    background-clip: content-box;
    left: 0;
    top: 0;
    z-index: @zindex-popover;
    visibility: hidden;

    &.fade, &.show {
        visibility: visible;
    }

    &.fade {
        & > div {
            opacity: 0;
            transition: all 0.3s, width 0s;
            transform: scale(0.7);
        }
    }

    &.fade.show {
        & > div {
            opacity: 1;
            transform: scale(1);
        }
    }

    & > div {
        position: relative;
        background: @color-popover-bg;
        box-shadow: @overlay-box-shadow;
        border-radius: 6px;

        &:after, &:before {
            position: absolute;
        }

        &:after { z-index: @zindex-popover + 1; }
        &:before { z-index: @zindex-popover; }
    }

    &.placement-bottom {
        > div {
            &:after {
                .triangle(up, 15px, 8px, @color-popover-bg);
                left: 15px;
                top: -8px;
            }

            &:before {
                .triangle(up, 17px, 9px, @color-popover-border);
                left: 14px;
                top: -9px;
            }
        }

        &.placement-bottom-right > div {
            &:after {
                left: auto;
                right: 15px;
            }

            &:before {
                left: auto;
                right: 14px;
            }
        }
    }

    &.placement-top > div {
        &:after {
            .triangle(down, 15px, 8px, @color-popover-bg);
            left: 15px;
            bottom: -8px;
        }

        &:before {
            .triangle(down, 17px, 9px, @color-popover-border);
            left: 14px;
            bottom: -9px;
        }
    }

    &.placement-left > div {
        &:after {
            .triangle(right, 8px, 15px, @color-popover-bg);
            right: -8px;
            top: 7px;
        }

        &:before {
            .triangle(right, 9px, 17px, @color-popover-border);
            right: -9px;
            top: 6px;
        }
    }

    &.placement-right > div {
        &:after {
            .triangle(left, 8px, 15px, @color-popover-bg);
            left: -8px;
            top: 7px;
        }

        &:before {
            .triangle(left, 9px, 17px, @color-popover-border);
            left: -9px;
            top: 6px;
        }
    }

    div.popover-body {
        padding: 15px;

        &.form-container {
            padding-bottom: 0;
        }
    }

    div.popover-footer {
        padding: 0 20px 20px 20px;
    }

    .popover-head {
        background: @color-popover-head-bg;
        padding: 14px 16px;
        position: relative;
        color: @color-popover-head-text;
        .border-top-radius(6px);
        border-bottom: 1px solid @color-popover-border;

        &:before {
            z-index: @zindex-popover + 2;
            position: absolute;
        }

        h3 {
            font-size: @font-size-base;
            font-weight: 600;
            margin-top: 0;
            margin-bottom: 0;
            padding-right: 15px;
            line-height: 130%;
        }

        p {
            font-size: @font-size-base - 2;
            font-weight: normal;
            margin: 5px 0 0 0;

            &:empty {
                display: none;
            }
        }

        .btn-close, .close {
            float: none;
            position: absolute;
            right: 11px;
            top: 12px;
            color: @color-popover-head-text;
            outline: none;
            opacity: .4;

            &:hover {
                opacity: 1;
            }
        }

        .inspector-move-to-container {
            opacity: .4;
            position: absolute;
            top: 14px;
            right: 26px;
            float: none;
            color: @close-color;
            cursor: pointer;
            text-decoration: none;
            line-height: 17px;

            &:hover {
                opacity: 1;
                color: @close-color;
            }

            &:before {
                .transform(~'rotate(270deg)');
            }
        }
    }

    &.placement-bottom .popover-head:before {
        .triangle(up, 15px, 8px, @color-popover-head-bg);
        left: 15px;
        top: -8px;
    }

    &.placement-left .popover-head:before {
        .triangle(right, 8px, 15px, @color-popover-head-bg);
        right: -8px;
        top: 7px;
    }

    &.placement-right .popover-head:before {
        .triangle(left, 8px, 15px, @color-popover-head-bg);
        left: -8px;
        top: 7px;
    }

    &.popover-danger {
        > div {
            color: #fff;
            background-color: @color-popover-danger-bg;
            .popover-head {
                p, h3 {
                    color: #fff;
                }
                .btn-close {
                    filter: var(--bs-btn-close-white-filter);
                }
            }
        }

        &.placement-top {
            > div:after {
                .triangle(down, 15px, 8px, @color-popover-danger-bg);
            }
        }

        &.placement-bottom {
            > div:after, .popover-head:before {
                .triangle(up, 15px, 8px, @color-popover-danger-bg);
            }
        }

        &.placement-left {
            > div:after, .popover-head:before {
                .triangle(right, 8px, 15px, @color-popover-danger-bg);
            }
        }

        &.placement-right {
            > div:after, .popover-head:before {
                .triangle(left, 8px, 15px, @color-popover-danger-bg);
            }
        }

        .popover-head {
            color: #fff;
            background-color: @color-popover-danger-bg;
            border-bottom: 2px solid rgba(255,255,255,.15);

            .close {
                color: #fff;
                text-shadow: none;
            }
        }
    }

    div.popover-fixed-height {
        height: 300px;
    }
}

.popover-highlight {
    position: relative;
    z-index: (@zindex-popover - 2) !important;
    &:hover, &:active, &:focus {
        z-index: (@zindex-popover - 2) !important;
    }
}

div.popover-overlay-container {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: @zindex-popover - 3;
    font-size: @font-size-base;

    > div.control-popover {
        > div {
            border-radius: @border-radius-base;
        }
    }
}

div.popover-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: @overlay-background;
    z-index: @zindex-popover - 3;
    display: none;

    &.show {
        display: block;
    }
}

@media (max-width: @screen-sm) {
    body.popover-open {
        overflow: hidden;

        .control-popover {
            overflow: auto;
            overflow-y: scroll;
            position: fixed;
            margin: 0;
            padding: 10px;
            width: 100% !important;
            z-index: @zindex-popover + 3;
            top: auto !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;

            > div {
                padding: 0;
                // min-height: 100%;

                &:before, &:after {
                    display: none;
                }
            }

            div.popover-fixed-height {
                height: 100%;
                min-height: 100%;
            }

            .popover-head:before {
                display: none;
            }
        }
    }

    div.popover-overlay {
        display: block;
    }
}