@import "variables.scss";

.fediverse-post.fediverse-post-rendered {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
    max-width: 640px;

    .fediverse-post-labels {
        .badge {
            span {
                padding: 4px;
            }
        }
    }

    img.fediverse-post-emoji {
        max-width: 24px;
        max-height: 24px;
        display: inline-block;
    }

    .card-body {
        line-height: 1.1;

        .card-title,
        .card-subtitle,
        .stretched-link {
            font-size: 1rem;
        }
    }

    // .card-text{
    //     position: relative;
    // }

    .card-footer {
        border-top: none !important;
        background: #fff !important;

        a {
            text-decoration: none;

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

    .post-author {
        line-height: 1.2;
    }

    .post-author-image {
        object-fit: contain;
        height: auto;
    }

    .fediverse-post-profile-image-wrapper {
        max-width: 86px !important;
    }

    .post-body {
        // white-space: pre-wrap;      
        line-height: 1.4;

        a {
            text-decoration: none;
            // color: $color-link;

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

        .post-poll-results {
            white-space: initial;

            img.emoji {
                margin-top: 0.5rem !important;
            }

            .progress-bar {
                background-color: lightskyblue;
            }
        }

        .post-video-placeholder {
            position: relative;

            &:after {
                content: '▶️';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                font-size: 8rem;
                line-height: 1rem;
                text-align: center;
                color: #fff;
                text-shadow: 5px 2px 10px rgba(0, 0, 0, 0.5);
                opacity: 0.8;
                transition: opacity 0.2s;
            }

            img {
                filter: brightness(0.5);
                transition: filter 0.2s;
            }

            &:hover {
                &:after {
                    opacity: 1;
                    transition: opacity 0.2s;
                }

                img {
                    filter: brightness(0.6);
                    transition: filter 0.2s;
                }
            }

        }

        .card {
            white-space: normal;
            margin-top: 2rem;
        }
    }

    .post-media {
        [data-media-type="video"] {
            .post-video-placeholder {
                img {
                    height: 360px !important;
                }
            }
        }
    }

    .post-attachment-preview {
        a {
            text-decoration: none !important;

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

        img.post-attachment-site-thumbnail {
            height: 360px !important;
            object-fit: cover !important;
        }
    }

    // .post-icon{
    //   margin-right: 5px;
    // }

    // body[data-bs-theme="dark"]{
    //     &{
    //         a.text-dark{
    //             color: black !important;
    //         }
    //     }
    // }
}

.fediverse-post,
.ftf-fediverse-post-embed {
    .invisible {
        display: none;
    }
}

.ftf-fediverse-post-alt-text {
    font-size: .75rem;
    padding: 5px;
    right: 20px !important;
    bottom: 20px !important;
}

video~.ftf-fediverse-post-alt-text {
    top: 20px !important;
    bottom: auto !important;
}

body[data-bs-theme="dark"] .fediverse-post.fediverse-post-rendered,
blockquote[data-bs-theme="dark"].fediverse-post.fediverse-post-rendered {
    .text-dark {
        color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important;
    }

    .card {
        .card-footer {
            background-color: var(--bs-card-bg) !important;
        }
    }

    .badge.text-bg-light {
        background: none !important;
    }
}