/*
 * 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.
 */

button.preview {
    background-color: #fff;
}

.containerCollapsed {
    max-width: 100%;
    display: flex;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    border-radius: 12px;
    /* Get radius from cpd */
    flex-direction: row;
    color: var(--cpd-color-text-secondary);
    overflow: clip;
    gap: 8px;
    padding: var(--cpd-space-3x) var(--cpd-space-4x);

    background: var(--cpd-color-bg-subtle-secondary);

    .textContent {
        display: flex;
        flex-direction: column;
    }

    .preview {
        flex-shrink: 0;
        aspect-ratio: 1;
        height: 2.7em;

        button {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 8px;
            border: none;
            height: 100%;
            aspect-ratio: 1;
        }
    }

    .siteName span {
        line-height: 135%;
    }

    .title,
    .siteName > span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
        min-width: 0;
    }
}

.containerExpanded {
    box-sizing: border-box;
    max-width: 100%;
    width: 478px;
    display: flex;
    border: 1px solid var(--cpd-color-border-interactive-secondary);
    border-radius: 12px;
    /* Get radius from cpd */
    flex-direction: column;
    color: var(--cpd-color-text-secondary);
    overflow: clip;

    background: var(--cpd-color-bg-subtle-secondary);

    &.inline {
        flex-direction: row;
        gap: var(--cpd-space-4x);
        padding: var(--cpd-space-3x) var(--cpd-space-4x);

        .title {
            margin: 0;
        }

        .siteAvatar {
            margin: auto 0;
        }

        .siteName {
            margin: 0;
        }
    }

    .textContent {
        padding: var(--cpd-space-3x) var(--cpd-space-4x);

        &.inline {
            padding: 0;
        }

        display: flex;
        flex-direction: column;
        gap: var(--cpd-space-1x);
    }

    .caption {
        display: inline-flex;
        flex-direction: column;
        min-width: 0;
        /* Prevent blowout */
    }

    .caption {
        flex: 1;
        overflow: hidden;
        /* cause it to wrap rather than clip */
    }

    .preview {
        display: flex;
        position: relative;
        max-width: 100%;
        width: 478px;
        height: 200px;
        background-size: cover;
        background-position: center;
        border: none;
        padding: 0;

        .playButton[data-kind="primary"] {
            padding: 0;
            width: 50px;
            height: 50px;
            margin: auto;
            background: var(--cpd-color-text-on-solid-primary);

            > svg {
                margin: auto;
                border-radius: 50px;
                color: var(--cpd-color-icon-primary);
            }
        }
    }

    .siteName {
        margin-top: var(--cpd-space-1x);
    }

    .title,
    .description {
        line-clamp: 2;
        -webkit-line-clamp: 2;
    }
}

.siteName {
    vertical-align: middle;
    display: flex;
    gap: var(--cpd-space-1-5x);

    > * {
        /* Center everything */
        margin: auto 0;
    }
}

.title,
.description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    margin: 0;
}

.title {
    color: var(--cpd-color-text-primary);
    text-decoration-line: none;
}
