@use 'utils/variables';
@use 'utils/mixins';

.user-profile-popover-floating-overlay {
    z-index: variables.$z-index-popover;
}

$profilePopoverWidth: 240px;
$profilePopoverBorderWidth: 1px;

.user-profile-popover {
    width: $profilePopoverWidth;
    max-height: calc(100vh - $profilePopoverWidth);
    border: $profilePopoverBorderWidth solid rgba(var(--center-channel-color-rgb), 0.16);
    border-radius: 4px;
    background: var(--center-channel-bg);
    box-shadow: var(--elevation-4);
    overflow-x: hidden;
    overflow-y: auto;

    .user-profile-popover_container {
        display: flex;
        height: 100%;
        flex-direction: column;
    }

    .user-profile-popover-title {
        position: sticky;
        z-index: 1;
        top: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        justify-content: end;
        justify-content: space-between;
        padding: 12px 8px 12px 8px;
        background: var(--center-channel-bg);

        .user-popover__role {
            max-width: calc($profilePopoverWidth - 40px);
            flex-grow: 1;
            background: unset;
            padding-inline-start: 8px;

            >span {
                height: 16px;
                padding: 0 4px;
                border-radius: 4px;
                background-color: rgba(var(--center-channel-color-rgb), 0.08);
                color: var(--center-channel-color-rgb);
                font-family: Open Sans, sans-serif;
                font-size: 10px;
                letter-spacing: 0.2px;
                line-height: 16px;
                text-transform: uppercase;
            }
        }

        .closeButtonRelativePosition {
            position: absolute;
            top: 0;
            right: 0;
            margin: 8px 8px 0 0;
        }
    }

    .user-profile-popover-content {
        .user-popover-image {
            position: relative;
            width: 128px;
            margin: 0 auto 8px auto;

            #userAvatar {
                width: 120px;
                min-width: 120px;
                height: 120px;
            }

            .user-popover-status {
                position: absolute;
                top: auto;
                right: 8px;
                bottom: 0;
                display: flex;
                width: 24px;
                height: 24px;
                padding: 2px;
                border-radius: 50px;
                background: rgba(var(--center-channel-bg-rgb), 1);

                svg {
                    width: 100%;
                    min-height: 100%;
                }
            }
        }

        .user-popover-last-active {
            display: block;
            color: rgba(var(--center-channel-color-rgb), 0.75);
            font-family: "Open Sans";
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0.02em;
            line-height: 16px;
            margin-block-end: 8px;
            padding-inline-end: 16px;
            padding-inline-start: 16px;
            text-align: center;
        }

        .user-profile-popover__heading {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            padding-inline-end: 16px;
            padding-inline-start: 16px;
            text-align: center;

            >p {
                margin: 0;
                font-family: Metropolis, sans-serif;
                font-size: 20px;
                font-weight: 600;
                line-height: 28px;
                @include mixins.textEllipsis;
            }

            i.shared-user-icon {
                color: rgba(var(--center-channel-color-rgb), 0.75);
                font-size: 16px;
            }
        }

        .user-profile-popover__non-heading {
            font-family: "Open Sans";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            margin-block-end: 4px;
            padding-inline-end: 16px;
            padding-inline-start: 16px;
            text-align: center;

            @include mixins.textEllipsis;
        }

        hr {
            border-color: rgba(var(--center-channel-color-rgb), 0.08);
            margin-block-end: 16px;
            margin-block-start: 16px;

            &.user-popover__bottom-row-hr {
                margin-block-start: 4px;
            }
        }

        .user-profile-popover__email {
            display: flex;
            width: calc($profilePopoverWidth - (2 * $profilePopoverBorderWidth));
            align-items: center;
            padding: 0 16px 10px 16px;
            justify-self: start;

            i.icon-email-outline {
                margin-inline-end: 8px;

                &::before {
                    margin-inline-end: 0;
                    margin-inline-start: 0;
                }
            }

            a {
                font-family: "Open Sans";
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;

                @include mixins.textEllipsis;
            }
        }

        .user-profile-popover-pluggables {
            &:not(:empty) {
                padding: 0 16px 12px 16px;
                @include mixins.textEllipsis;
            }
        }

        .user-popover__custom-status {
            display: flex;
            align-items: center;
            font-family: "Open Sans";
            font-size: 14px;

            span.emoticon {
                font-size: 16px;
            }
        }
        
        .user-popover__custom_attributes {
            display: flex;
            flex-direction: column;
            padding: 0 16px 12px 16px;

            .user-popover__subtitle {
                margin-bottom: 4px;
                font-size: 11px;
                font-weight: 600;
                gap: 4px;
                line-height: 16px;
                @include mixins.textEllipsis;
            }

            .user-popover__subtitle-text {
                margin: 0;
            }
        }

        .user-popover__time-status-container {
            display: flex;
            flex-direction: column;
            padding: 0 16px 12px 16px;

            @include mixins.textEllipsis;

            .user-popover__subtitle {
                display: flex;
                margin-bottom: 4px;
                font-size: 11px;
                font-weight: 600;
                gap: 4px;
                line-height: 16px;
                @include mixins.textEllipsis;
            }

            .user-popover__subtitle-text {
                margin: 0;
            }

            .user-popover__set-status {
                width: fit-content;
                height: auto;
                padding: 4px 0 0;
                border: none;
                background: none;
            }
        }
    }

    .user-profile-popover-bottom-row {
        position: sticky;
        bottom: 0;
        background: var(--center-channel-bg);

        .user-popover__bottom-row-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px 16px 16px;
            margin: 0;
            gap: 4px;
            row-gap: 8px;

            .user-popover__bottom-row-end {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 4px;
                justify-items: flex-end;
                row-gap: 4px;
            }
        }
    }
}
