﻿.previewResult {
    max-height: 0px;
    border-radius: 10px;
    bottom: 50%s;
    left: 50%;
    max-width: 300px;
    background-color: var(--backgroundColorTransparent);
    min-height: 200px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.39), 0 8px 20px rgba(0, 0, 0, 0.452);
    padding: 20px;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    overflow: hidden;
    position: fixed;
    transition: opacity .4s;
    opacity: 0;
}

    .previewResult.show {
        max-height: 50vh;
        display: flex;
        animation: animePreview .4s forwards;
    }


    @keyframes animePreview{
        0% {
            display: flex;
            opacity: 0;
        }
        1% {
            display: flex;
            opacity: 0;
        }

        100% {
            display: flex;
            opacity: 1;
        }
    }

.previewHeader {
    cursor: grab;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--backgroundColor2);
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px;
    color: var(--fontColor1);
    box-sizing: border-box;
}

.previewHeader h3,
.previewHeader h4 {
    max-width: 100%;
}

.previewHeader div {
    max-width: 80%;
}

.previewHeader h3 a {
    color: var(--fontColor1);
    text-decoration: none;
    max-width: 50%;
}

.previewHeader button {
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    background-color: var(--backgroundColor2);
    color: var(--fontColor2);
    transition: .2s;
}

.previewHeader button:hover {
    background-color: var(--backgroundColor1);
    color: var(--fontColor1);
}

.previewHeader h3 {
    overflow-x: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.previewHeader h3 a:hover {
    text-decoration: underline;
}

.previewContent {
    overflow-y: auto;
    margin-top: 10px;
    color: var(--fontColor1) !important;
}

.previewContent * {
    color: var(--fontColor1) !important;
}

@media (min-width: 1200px) {
    .previewResult {
        max-width: 500px;
    }
}
                                                                