/**
 * 이 파일은 회원모듈의 일부입니다. (https://www.imodules.io)
 *
 * 회원모듈 스타일을 정의한다.
 *
 * @file /modules/member/resources/styles/Member.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2026. 10. 21.
 */
div[data-role='module'][data-module='member'] {
}

[data-profile-id]:not([data-layer='profile']) {
    cursor: pointer;
}

/**
 * 회원프로필 레이어
 * 기준 DOM 의 왼쪽 아래에 표시하며, 아래쪽 공간이 부족한 경우 왼쪽 위에 표시한다.
 */
div[data-role='module'][data-module='member'][data-layer='profile'] {
    width: 300px;
    max-width: calc(100vw - 20px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--im-text-primary);
    background: var(--im-bg-primary);
    border: var(--im-component-border-weight) solid var(--im-border-primary);
    border-radius: calc(var(--im-component-border-radius) + 8px);
    box-shadow: 0 8px 24px var(--im-fill-tertiary-alpha);

    &:popover-open {
        position: fixed;
        inset: auto;
        position-area: block-end span-inline-end;
        position-try-fallbacks: flip-block;
        position-visibility: anchors-visible;
        margin-block: var(--im-component-gap-extra-small);
    }

    > div[data-role='header'] {
        display: flex;
        align-items: center;
        gap: var(--im-component-gap-large);
        padding: var(--im-component-padding-extra-small);

        > i[data-role='photo'] {
            flex-shrink: 0;
            width: 72px;
            height: 72px;
            background-color: var(--im-bg-tertiary);
            background-position: center;
            background-size: cover;
            border-radius: calc(var(--im-component-border-radius) + 12px);
        }

        > b[data-role='name'] {
            flex-grow: 1;
            min-width: 0;
            overflow: hidden;
            font-size: var(--im-font-size-h6);
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    > div[data-role='content'] {
        padding: var(--im-component-padding-extra-small);
        border-top: var(--im-component-border-weight) solid var(--im-border-primary);

        &:empty {
            display: none;
        }
    }
}