.data-preview {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    & > .i-contents {
        flex: 1;
        height: 0;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 100%;

        /* show site theme in background color */
        &:has(> .i-preview-area > .i-post-preview) {
            background: linear-gradient(to bottom, var(--P-cohost-bg), rgb(var(--P-color-bg)));
        }
        &:has(> .i-preview-area > .i-post-preview > .is-site-dark-theme) {
            background: var(--P-cohost-dark-bg);
        }

        & > .i-preview-area {
            grid-area: 1 / 1;
            overflow: auto;
            isolation: isolate;
        }

        & > .i-error-area {
            grid-area: 1 / 1;
            position: relative;
            overflow: auto;

            &:empty {
                display: none;
            }
        }
    }

    & > .preview-header {
        padding: 0.5em 1em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5em;
        position: relative;
        border-bottom: 1px solid rgb(var(--P-color-accent));
        box-shadow: 0 1px 2px #0002;
        z-index: 1;

        .preview-config {
            display: flex;
            align-items: center;
            gap: 0.5em;
            flex: 1;

            .output-select {
                width: 100%;
                max-width: 8em;
            }
        }

        .render-indicator {
            position: relative;
            width: 1.2em;
            height: 1.2em;
            line-height: 0;
            visibility: hidden;
            opacity: 0;

            &::before {
                content: '';
                display: inline-block;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                border-radius: 50%;
                border: 2px solid rgb(var(--P-color-accent));
                border-bottom-color: transparent;
            }

            &.is-rendering {
                opacity: 1;
                visibility: visible;
                transition: opacity 0.1s;

                &::before {
                    animation: P-data-preview-render-indicator-spin 1s infinite linear;
                    @keyframes P-data-preview-render-indicator-spin {
                        0% {
                            transform: none;
                        }
                        100% {
                            transform: rotate(360deg);
                        }
                    }
                }
            }
        }
    }

    & > .i-contents > .i-preview-area > .preview-error-placeholder {
        background: rgb(var(--P-card-bg));
        border-radius: 0.5em;
        padding: 0.5em 1em;
        margin: 1em;
        user-select: text;
        box-sizing: border-box;
    }

    & > .i-contents > .i-error-area > .preview-error {
        background: rgb(var(--P-card-bg));
        border: 2px solid var(--P-error);
        margin: 1em;
        padding: 0.5em 1em;
        border-radius: 0.5em;

        .error-title {
            font-weight: bold;
        }

        .error-contents {
            margin-top: 0.5em;
            padding-top: 0.5em;
            border-top: 1px solid var(--P-separator);
            white-space: pre-wrap;
            font-family: var(--P-monospace);
            font-size: smaller;
            overflow-wrap: break-word;
        }

        .error-source {
            margin-top: 1em;

            .inner-title {
                font-weight: bold;
                margin-bottom: 0.5em;
            }
        }
    }

    & > .i-contents > .i-preview-area > .i-post-preview {
        padding: 1em;
    }

    & > .i-contents > .i-preview-area > .i-data-preview {
        margin: 1em;
        border-radius: 0.5em;
        background: rgb(var(--P-card-bg));
        user-select: text;
        contain: layout;
    }

    & > .i-contents > .i-preview-area > .i-preview-click-to-render {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        align-items: center;

        button {
            font: inherit;
            background: rgb(var(--P-color-accent));
            color: rgb(var(--P-color-accent-fg));
            border: none;
            padding: 0.5em 2em;
            border-radius: 0.5em;
            box-shadow: inset 0 1px #fff8, inset 0 -1px #0006, 0 1px 2px #000a;

            &:active {
                opacity: 0.5;
            }
        }
    }
}
