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

.wrapper {
    display: flex;
    align-items: center;
    margin-top: var(--cpd-space-3x);
    margin-bottom: var(--cpd-space-4x);
}

.container {
    /* As per design, seperator should span whole width. */
    div[role="separator"] {
        margin-inline: 0;
    }
    max-width: 300px;
    /* Override menu defaults */
    padding-block: 0 !important;
    section.profile {
        margin: var(--cpd-space-8x) var(--cpd-space-6x);
        margin-bottom: var(--cpd-space-3x);
        display: flex;
        flex-direction: column;
        gap: var(--cpd-space-2x);
        > * {
            margin: auto;
        }

        .displayname {
            text-wrap: balance;
            text-align: center;
        }

        .createAccount {
            margin-top: var(--cpd-space-1x);
            margin-bottom: var(--cpd-space-2x);
        }
    }
    section.actions {
        margin: var(--cpd-space-2x) 0;
        margin-bottom: var(--cpd-space-3x);
        padding-top: 0;
        display: flex;
        flex-direction: column;
        gap: var(--cpd-space-1x);
        font: var(--cpd-font-body-md-medium);
        > button[data-kind="primary"] > svg {
            color: var(--cpd-color-icon-secondary);
        }
    }
}

.avatarWrapper {
    position: relative;
    display: inline-flex;
    overflow: visible;
}

.statusEmoji {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    /* bottom edges aligned with the avatar */
    bottom: 0;
    /* center of circle on the right edge of the avatar */
    right: -10px;
    background-color: var(--cpd-color-bg-canvas-default);
}

.triggerButton {
    border: none;
    background: none;
    padding: 0;
    display: flex;
    color: var(--cpd-color-body-primary);
    cursor: pointer;
    gap: var(--cpd-space-2x);
    > span {
        height: fit-content;
        margin-top: auto;
        margin-bottom: auto;
        max-width: 200px;
        text-overflow: ellipsis;
        overflow: hidden;
        text-wrap: nowrap;
    }
    margin-left: var(--cpd-space-3x);
    margin-right: var(--cpd-space-2x);
    padding-inline-start: var(--cpd-space-1-5x);
}