@layer dialogs {
	dialog[data-id="tiktok-overlay-dlg"] {
        & > .popup {    
            height: 0;
            overflow: hidden;

            .card-body {
                padding: 0;

                .ph {
                    aspect-ratio: 9 / 16;
                    width: min(440px, 90vw);

                    .loading {
                        width: 32px;
                    }   

                    iframe {
                        width: 100%;
                        aspect-ratio: 9 / 16;
                    }                 
                }
            }

            .ux-icon-close {
                top: -11px !important;
                right: -12px !important;
                width: auto !important;
                background: #333;
                border-radius: 50%;
                padding: 4px;

                svg {
                    width: 17px !important;
                    fill: #fff !important;
                }
            }
        }

        & > .loading {
            display: none;
        }

        &.is-loading {
            .popup {
                .tiktok-video-container {
                    height: 0;
                    overflow: hidden;
                }
            }

            & > .loading {
                display: inline-block;
                background-color: #f3f3f3;
                width: 42px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
        }

        &.ready {
            .popup {
                background-color: transparent;
                border-radius: 0;
                height: auto;
                overflow: visible;
                opacity: 1;
                transition: all 0.6s;

                .ph {
                    aspect-ratio: var(--aspect-ratio);
                    border-radius: 5px;
                    overflow: hidden;
                }
            }
        }
    }
}