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

.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);
        }
    }
}

.triggerButton {
    border: none;
    background: none;
    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-top: var(--cpd-space-3x);
    margin-bottom: var(--cpd-space-4x);
    margin-left: var(--cpd-space-3x);
}
