@import "../../_base.scss"

.userInfo {
    position: relative;
    height: 75%;
    width: 99%;
    top: -75%;
    left: 1%;
    aspect-ratio: 1;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;

    .avatarSelector {
        height: 100%;
        aspect-ratio: 1;
    }

    .infoContainer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: 100%;
        width: 100%;

        .userId {
			@extend .aeroButton;

            height: 30%;
            width: fit-content;
            display: flex;
            text-align: begin;
            align-items: center;

            .userName {
                display: inline-block;
                width: fit-content;
                color: white;
                margin: 0;
            }

            .userStatus {
                display: inline-block;
                width: fit-content;
                color: #B9DDE7;
            }
        }

        .userMessage {
			@extend .aeroButton;

            width: fit-content;
            height: 30%;
            display: flex;
            text-align: begin;
            align-items: center;
            margin: 0;
            color: white;
        }
    }
}