@custom-media --tablet-until (max-width: 768px);
@custom-media --tablet-from (min-width: 769px);

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

    &.--closed {
        display: none;

        .modal-content-wrapper {
            @media(--tablet-until) {
                transform: translateY(100%);
            }
        }
    }

    &.--opened {
        display: block;

        .modal-content-wrapper {
            @media(--tablet-until) {
                animation-name: swipe-up;
                animation-duration: 0.3s;
                animation-delay: 0s;
                animation-iteration-count: 1;
                animation-timing-function: ease;
            }
        }

    }

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

    .modal-content-wrapper {
        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(--tablet-until) {
            bottom: 0;
            top: initial;
            align-items: flex-end;
        }
        
        .modal-content {
            pointer-events: all;
            width: auto;
            height: auto;
            background-color: var(--bg-color);
            border-radius: var(--border-radius);
            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(--tablet-until) {
                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;
        }
    }

}



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

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