/*
 * Copyright 2026 Element Creations Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.root {
    display: flex;
    column-gap: 4px;
}

.measureImage {
    display: none;
}

.thumbnailContainer {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    contain: paint;
    border-radius: var(--MBody-border-radius);
}

.placeholder {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--cpd-color-bg-canvas-default);
}

.spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex: 1;
}

.blurhash > canvas {
    animation: blurhashPulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.mediaContent {
    max-width: 100%;
    max-height: 100%;
}

.image {
    display: block;
    height: 100%;
    width: 100%;
}

.banner {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 4px;
    border-radius: var(--MBody-border-radius);
    font-size: 0.9375rem;
    user-select: none;
    pointer-events: none;
    max-width: min(100%, 350px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: rgb(0, 0, 0, 0.6);
    color: #ffffff;
}

.gifLabel {
    position: absolute;
    display: block;
    top: 0px;
    left: 14px;
    padding: 5px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(0, 0, 0, 0.2);
    color: #ffffff;
    pointer-events: none;
}

@keyframes blurhashPulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }
}
