/* Radzen shell around PlaylistTemasPanel when opened from the testing dialog. */
.rz-dialog.wk-playlist-dialog-host {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
}

.rz-dialog.wk-playlist-dialog-host .rz-dialog-content {
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Radzen pins non-alert dialogs to the top and full width below 768px. */
@media (max-width: 768px) {
    .rz-dialog-wrapper:has(.wk-playlist-dialog-host) {
        align-items: center !important;
        justify-content: center !important;
    }

    .rz-dialog.wk-playlist-dialog-host:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        position: relative !important;
        width: min(400px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: min(72vh, 640px) !important;
        height: auto !important;
        inset: auto !important;
        inset-block-start: auto !important;
        inset-inline-start: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 18px !important;
    }
}

/* Testing dialog: on a narrow viewport Radzen pins the shell to the top and the
   glass plate is painted on the full-screen wrapper, which leaves a tall empty area. */
@media (max-width: 768px) {
    .rz-dialog-wrapper:has(.wk-testing-dialog) {
        align-items: center !important;
        justify-content: center !important;
        background: rgba(0, 0, 0, 0.45) !important;
        box-shadow: none !important;
    }

    .rz-dialog-wrapper:has(.wk-testing-dialog)::before,
    .rz-dialog-wrapper:has(.wk-testing-dialog)::after {
        content: none !important;
        display: none !important;
    }

    .rz-dialog.wk-testing-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert) {
        position: relative !important;
        width: min(480px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 32px) !important;
        inset: auto !important;
        inset-block-start: auto !important;
        inset-inline-start: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: none !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18) !important;
        overflow: auto !important;
    }

    .rz-dialog.wk-testing-dialog .rz-dialog-content {
        background: #fff !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }
}