$primary: #3472e6 !default;

PartyChatBox
{
    position: absolute;
    bottom: 130px;
    min-width: 400px;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    flex-direction: column;
    align-items: stretch;
    font-size: 14px;
    font-family: Poppins;
    gap: 10px;
    pointer-events: none;

    .output
    {
        flex-grow: 1;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        background-color: #0004;
        border-radius: 10px;
        padding: 8px 8px;
        backdrop-filter: blur( 10px );

        &:empty
        {
            opacity: 0;
        }

        .chat_entry
        {
            padding: 2px;
            gap: 10px;
            text-shadow: 2px 2px 2px #000a;
            align-items: center;

            .avatar
            {
                width: 25px;
                height: 25px;
                background-position: center;
                background-size: cover;
                border-radius: 100px;
            }

            .author
            {
                color: #2d95ce;
                white-space: nowrap;
                flex-shrink: 0;
            }

            .message
            {
                color: #fff;
            }
        }
    }

    .input
    {
        height: 0px;
        transition: all 0.1s ease-out;
        background-color: $primary;
        overflow: hidden;
        align-items: stretch;
        pointer-events: all;

        .prepend
        {
            padding: 8px;
            font-size: 14px;
            color: white;
            flex-shrink: 1;
            flex-grow: 0;
            background-color: #fff;
            color: $primary;
            align-items: center;
        }

        textentry
        {
            font-size: 14px;
            color: white;
            flex-grow: 1;
        }
    }

    &.open
    {
        .input
        {
            height: 30px;
            opacity: 1;
        }
    }
}
