@import '_variables';

.quote {
    margin-top: 10px;
    border: solid 1px var(--dark_grey);
    border-radius: 10px;
    background-color: var(--bg_elements);
    overflow: hidden;
    pointer-events: all;
    position: relative;
    width: 100%;

    &:hover {
        border-color: var(--grey);
    }

    &.unavailable:hover {
        border-color: var(--dark_grey);
    }

    .tweet-name-row {
        padding: 4px 6px;
    }

    .quote-text {
        overflow: hidden;
        white-space: pre-wrap;
        word-wrap: break-word;
        padding: 0px 6px 6px 6px;
    }

    .show-thread {
        padding: 0px 6px 3px 6px;
        margin-top: -3px;
    }

    .replying-to {
        padding: 0px 6px;
        margin: unset;
    }
}

.unavailable-quote {
    padding: 12px;
}

.quote-link {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

.quote-media-container {
    max-height: 300px;
    display: flex;

    .card {
        margin: unset;
    }

    .attachments {
        border-radius: 0;
    }

    .media-gif {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .gallery-gif .attachment {
        display: flex;
        justify-content: center;
        background-color: var(--bg_color);

        video {
            height: unset;
            width: unset;
        }
    }

    .gallery-video, .gallery-gif {
        max-height: 300px;
    }

    .still-image img {
        max-height: 250px
    }
}