@import "jb-core/style/media.css";

:host{
    width: max-content;
    display: none;
    /*both tablet & mobile*/
        @media(--jb-viewport-md-to) {
        /*this actualy prevent popover tag to occupy space in container dom. if not provided wrapper dom may get overflow*/
        position: absolute;
        width: var(--viewport-width, 100vw);
    }

}
:host(:state(open)){
    display: block;

}
.jb-popover-web-component {
    position: absolute;
    display: grid;
    margin-block-start: var(--margin-top);
    inset-block-start: var(--inset-block-start);
    inset-inline-start: 0;
    z-index: var(--z-index);
    width: inherit;
    @media(--jb-viewport-sm-to) {
        margin-block-start: 0;
        inset-block-start: 0;
        inset-inline-start: 0;
        bottom: 0;
        position: fixed;
        width: var(--viewport-width, 100vw);
        height: var(--viewport-height, 100dvh);
        
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        grid-template-areas: "." "content";
        overflow-x: hidden;
        overflow-y: hidden;
    }
    @media (--jb-viewport-sm-from) and (--jb-viewport-md-to)   {
        position: fixed;
        inset: 0;
        width: var(--viewport-width, 100vw);
        height: var(--viewport-height, 100dvh);
        margin: 0;
        
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "content";
        overflow: hidden;
    }
    @media(--jb-viewport-md-to) {
        inset-block-start: var(--viewport-top, 0px);
        inset-inline-start: auto;
        left: var(--viewport-left, 0px);
        right: auto;
    }
    .popover-content {
        background: var(--bg-color);
        border-radius: var(--border-radius);
        padding: var(--padding);
        box-shadow: var(--box-shadow);
        display: grid;
        align-items: center;
        justify-items: center;
        justify-content: center;
        box-sizing: border-box;
        /*animation to handle overflow move*/
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        @media(--jb-viewport-sm-to) {
            transition: transform 0.3s 0s ease;
            border-radius: var(--border-radius) var(--border-radius) 0 0;
            grid-area: content;
            padding: 2rem 0;
            /* A persistent transform traps nested fixed sheets inside this panel. */
            transform: none;
                max-height: var(--viewport-height, 100dvh);
            padding-bottom: max(2rem, env(safe-area-inset-bottom));
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            padding-block-start: 0;
            max-height: var(--viewport-height, 100dvh);
            grid-template-rows: auto minmax(0, 1fr);
            
            @starting-style {
                transform: translateY(100%);
            }
            &> slot {
                width: 100%;
                display: flex;
                justify-content: center;
                min-height: 0;
                max-height: 100%;
                overflow: auto;
                overscroll-behavior: contain;
            }
        }
        @media (--jb-viewport-sm-from) {
            opacity: 1;
            transition: opacity 0.2s ease;
            @starting-style { opacity: 0; }
        }
        @media (--jb-viewport-sm-from) and (--jb-viewport-md-to) {
            padding: 2rem;
            grid-area: content;
            justify-self: center;
            align-self: center;
            width: max-content;
            max-width: calc(100vw - 2rem);
            max-height: calc(var(--viewport-height, 100dvh) - 2rem);
            overflow: auto;
        }
        @media (--jb-viewport-md-to) {
            max-width: 100%;
            overscroll-behavior: contain;
            position: relative;
        }

        .drag-handle { 
            display: none;
            @media(--jb-viewport-sm-to){
                display: grid;
                place-items: center;
                width: 100%;
                height: 2rem;
                touch-action: none;
                user-select: none;
                span {
                    width: 2.5rem;
                    height: 0.25rem;
                    border-radius: 999px;
                    background: var(--jb-popover-handle-color, oklch(from var(--jb-surface-inverse) l c h / 0.3));
                }
            }
        }
    }
}

.popover-backdrop { 
    display: none;
    @media (--jb-viewport-md-to) {
        display: block;
        position: absolute;
        inset: 0;
        background: var(--back-bg-color);
        backdrop-filter: blur(5px);
        opacity: 1;
        transition: opacity 0.2s ease;
        @starting-style { opacity: 0; }
    }
    @media (--jb-viewport-sm-to) {
        touch-action: none;
    }
}

/*TODO: move @media styles to tree style structure (AI put new styles kike this and they are not organized)*/
@media (--jb-viewport-sm-to) {
    .jb-popover-web-component .popover-content {

    }
}

@media (prefers-reduced-motion: reduce) {
    .popover-backdrop,
    .jb-popover-web-component .popover-content { transition: none; }
}





@media (--jb-viewport-md-from) {
    .jb-popover-web-component.--auto-placement .popover-content {
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        overflow: auto;
    }
}