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

:host {
    display: none;
    .modal-content {
        @media(--jb-viewport-md-to) {
            transform: translateY(100%);
        }
    }
}

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

    .modal-content {
        @media(--jb-viewport-md-to) {
            animation-name: swipe-up;
            animation-duration: 0.3s;
            animation-delay: 0s;
            animation-iteration-count: 1;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
        }
    }
}

.jb-modal-web-component {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-index) + var(--stack-index, 0));
    width: 100%;
    height: 100%;

    .modal-background {
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--back-bg-color);
        backdrop-filter: blur(0.625rem);
        z-index: 2;
        width: 100%;
        height: 100%;
    }

    .modal-content {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;

        @media(--jb-viewport-md-to) {
            bottom: 0;
            top: initial;
            align-items: flex-end;
        }

        .content-wrapper {
            pointer-events: all;
            width: auto;
            height: auto;
            background-color: var(--bg-color);
            border-radius: var(--border-radius);
            corner-shape: var(--content-corner-shape);
            max-width: calc(100% - 2rem);
            max-height: calc(100dvh - 4rem);
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: max-content minmax(0, 1fr) max-content;
            grid-template-areas: "header" "content" "footer";
            overflow: hidden;

            @media(--jb-viewport-md-to) {
                width: 100%;
                height: auto;
                max-height: calc(100% - 5rem);
                max-width: 100%;
                min-height: 2rem;
                border-radius: var(--border-radius) var(--border-radius) 0 0;
                overflow-y: auto;
            }
        }

        slot[name="header"]::slotted(*) {
            grid-area: header;
            font-weight: 700;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.5rem;
            gap: 0.5rem;
        }

        slot[name="content"]::slotted(*),
        slot:not([name])::slotted(*) {
            grid-area: content;
            padding: 1rem;
            max-height: 100%;
            overflow: auto;
        }

        slot[name="footer"]::slotted(*) {
            grid-area: footer;
            display: flex;
            gap: 0.5rem;
            padding: 1rem;
            justify-content: flex-end;
        }
        .drag-handle { 
            display: none;
            @media(--jb-viewport-md-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));
                }
            }
        }
    }

}



@keyframes swipe-up {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

@media (prefers-reduced-motion: reduce) {
    :host(:state(open)) .modal-content {
        animation: none;
        transform: translateY(0);
    }
}