@import '../../../cohost-inherited.scss';

.post-preview {
    background: white;
    color: black;
    border-radius: 0.5rem;
    box-shadow: 0 4px 5px rgba(25, 25, 25, 0.14), 0 1px 10px rgba(25, 25, 25, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.2);
    margin: 1px;
    user-select: none;
    transition: background 1s, color 1s;

    &.dark-theme {
        margin: 0;
        box-shadow: rgba(0, 0, 0, 0.14) 0 4px 5px 0, rgba(0, 0, 0, 0.12) 0 1px 10px 0, rgba(0, 0, 0, 0.2) 0 2px 4px 0;
        border: 1px solid rgb(74, 72, 71);
    }

    & > hr {
        height: 0;
        margin: 0;
        border: none;
        border-top: 1px solid rgb(191 186 181);
        transition: border-color 1s;
    }

    &.dark-theme > hr {
        height: 0;
        border: none;
        border-top: 1px solid rgb(74, 72, 71);
    }

    .prose-container {
        position: relative;
        font-size: var(--P-font-size-content);
        border: 1px solid var(--tw-border-opacity);
        transition: all 1s;
        overflow: clip;
        isolation: isolate;

        .inner-prose {
            padding: 0 0.75rem;
            margin: 1rem 0;
            overflow-wrap: break-word;
            max-width: 65ch;
            user-select: text;
            contain: layout;

            &.is-error {
                border: 2px dashed red;
                border-radius: 0.5rem;
                padding: 0.2rem 0.5rem;
                white-space: pre-wrap;
            }
        }
    }

    &.is-stale .inner-prose {
        transition: opacity 0.3s 0.5s;
        opacity: 0.5;
    }

    > .post-header,
    > .post-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em 0.75em;
        background: var(--P-cohost-bg);
        transition: background 1s;
    }

    > .post-header {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;

        .render-config {
            display: flex;
        }

        .i-settings-container {
            display: flex;
            gap: 0.5em;
        }

        .i-config-button,
        .i-errors-button {
            display: inline-flex;
            gap: 0.3em;
            align-items: center;
            background: none;
            border: 1px solid var(--P-separator);
            margin: 0;
            padding: 0.1em 0.2em;
            border-radius: 0.5em;
            font: inherit;
            color: inherit;
            opacity: var(--inactive-opacity);
            position: relative;

            --inactive-opacity: 0.2;
        }

        .i-config-button {
            display: inline-flex;
            opacity: 1;
            border-color: rgb(var(--P-color-accent));
            --active-bg: rgb(var(--P-color-accent));
            gap: 0.1em;
            padding: 0.1em;
            white-space: nowrap;
            flex-wrap: wrap;

            .config-icon {
                aspect-ratio: 1;
                width: 20px;
                margin-right: 0.1em;
            }

            .config-preview-item {
                background: #0002;
                padding: 0.1em 0.2em;
                border-radius: 0.3em;

                transition: background 1s;
            }
        }

        .i-errors-button {
            --fg: currentColor;
            --bg: transparent;
            --active-bg: var(--P-error);
            --active-fg: var(--P-error-content-fg);

            .i-errors-icon {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 1.3em;
                height: 1.3em;
                border-radius: 50%;
                background: var(--bg);
                border: 1px solid var(--fg);
                color: var(--fg);
                font-size: smaller;
            }

            &.has-errors {
                opacity: 1;
                border-color: var(--P-error);

                .i-errors-icon {
                    background: var(--active-bg);
                    color: var(--active-fg);
                    border-color: var(--active-bg);
                    animation: P-post-preview-header-errors-has-errors 1s;
                }
                @keyframes P-post-preview-header-errors-has-errors {
                    0% {
                        transform: none;
                        opacity: var(--inactive-opacity);
                        background: var(--bg);
                        color: var(--fg);
                        border-color: var(--fg);
                    }
                    20% {
                        background: var(--active-bg);
                        color: var(--active-fg);
                        border-color: var(--active-bg);
                        transform: scale(2);
                    }
                }
            }

            .i-errors-count {
                font-feature-settings: 'tnum' 1;
            }
        }

        .i-config-button,
        .i-errors-button.has-errors {
            &::before {
                content: '';
                position: absolute;
                inset: -4px;
                border-radius: calc(0.5em + 3px);
                border: 1px solid var(--active-bg);
                opacity: 0;
                transform: scale(0.9);
                transition: all 0.2s;
            }

            &:hover::before {
                opacity: 1;
                transform: scale(1);
            }
        }

        .i-config-contents {
            width: 80vw;
            max-width: 20em;

            .i-config-title {
                font-weight: bold;
                padding: 0.5em;
                font-size: 1.1em;
            }

            .i-cohost-unavailable {
                display: flex;
                align-items: center;
                gap: 0.5em;
                padding: 0.5em;

                .i-icon {
                    flex-shrink: 0;
                }
            }

            .config-item {
                padding: 0.5em;
                border-top: 1px solid var(--P-separator);

                .item-header {
                    font-weight: bold;
                    margin-bottom: 0.2em;
                }
                .item-description {
                    color: rgb(var(--P-color-fg) / 0.8);
                }
            }
        }

        .i-errors {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 80vw;
            max-width: 20em;

            &:empty::before {
                content: 'No errors. Everything is ok!';
                padding: 1em;
                text-align: center;
            }

            .i-error {
                padding: 0.5em 0.75em;

                & + .i-error {
                    border-top: 1px solid var(--P-separator);
                }

                .quick-help {
                    margin-top: 0.5em;
                    font-size: smaller;
                    border-radius: 0.5em;
                    padding: 0.5em;
                    background: var(--P-info-box-bg);
                }
            }
        }
    }

    > .post-footer {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;

        --size-meter-fg: 0 0 0;

        .post-size-meter {
            --size-of-max: 0;
            color: color-mix(
                in oklab,
                rgb(var(--size-meter-fg)),
                rgb(var(--P-color-warning)) calc(var(--size-of-max) * 100%)
            );

            .i-warning {
                border: 1px solid;
                border-radius: 0.5em;
                padding: 0.1em 0.4em;
            }
        }

        .copy-to-clipboard {
            position: relative;
            font: inherit;
            background: none;
            border: 1px solid rgb(var(--P-color-accent));
            border-radius: 0.5em;
            padding: 0.2em 0.3em;
            color: inherit;
            transition: background 0.2s, color 0.2s;

            &:disabled {
                opacity: 0.5;
            }

            &:active {
                background: rgb(var(--P-color-accent));
                color: rgb(var(--P-color-accent-fg));
            }

            &.did-copy {
                animation: P-post-preview-copy-to-clipboard-did-copy 1s;
                @keyframes P-post-preview-copy-to-clipboard-did-copy {
                    0% {
                        background: rgb(var(--P-color-accent));
                        color: transparent;
                    }
                    90% {
                        background: rgb(var(--P-color-accent));
                        color: transparent;
                    }
                }

                &::after {
                    content: '✓';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: rgb(var(--P-color-accent-fg));

                    animation: P-post-preview-copy-to-clipboard-did-copy-after 1s;
                    @keyframes P-post-preview-copy-to-clipboard-did-copy-after {
                        0% {
                            transform: translate(-50%, -50%) scale(0.01);
                            animation-timing-function: cubic-bezier(0.2, 0.7, 0.6, 1);
                        }
                        15% {
                            transform: translate(-50%, -50%) scale(1.2);
                            animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
                        }
                        40% {
                            transform: translate(-50%, -50%);
                        }
                        90% {
                            color: rgb(var(--P-color-accent-fg));
                        }
                        100% {
                            color: transparent;
                        }
                    }
                }
            }
        }
        .copy-to-clipboard-warnings {
            .i-warnings {
                list-style: none;
                padding: 0;
                margin: 0;
                width: 80vw;
                max-width: 32ch;

                li {
                    padding: 0.5em 1em;
                    border-bottom: 1px solid var(--P-separator);
                }
            }
            .i-buttons {
                padding: 0.5em 1em;
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .prose-read-more {
        font-weight: 700;
        font-size: 0.875em;
        line-height: 1.25em;
        padding-left: 0.75em;
        padding-bottom: 0.75em;
        background: white;
        cursor: pointer;
        display: inline-block;
        text-decoration: inherit;
        color: rgb(var(--color-foreground));
        transition: background 1s, color 1s;

        &:hover {
            text-decoration: underline;
        }
    }

    &.dark-theme {
        background: black;
        color: #fff;

        > .post-header, > .post-footer {
            --P-cohost-bg: var(--P-cohost-dark-bg);
            background: #191919;
        }
        > .post-footer {
            background: #191919;
            --size-meter-fg: 191 186 181;
        }

        > .post-header .config-preview-item {
            background: #fff2;
        }

        > .prose-container {
            --tw-border-opacity: 1;

            > .prose-read-more {
                background: #000;
                color: rgb(var(--color-accent));
            }
        }
    }
}

.p-prose-outer {
    @include cohost-prose-outer;
}
.p-prose-outer .p-prose {
    @include cohost-prose;
}

.cohost-message-box {
    position: relative;
    z-index: 5;
    margin: 1em;
    padding: 1em;
    border-radius: 0.5em;
    background: rgb(var(--P-color-bg));
    color: rgb(var(--P-color-fg));
    box-shadow: 0 0.5em 1em #0009;

    :first-child {
        margin-top: 0;
    }
    :last-child {
        margin-bottom: 0;
    }

    &[data-level='warning'] {
        color: var(--P-error-text);
    }
}
