Chatbox {
    position: absolute;
    align-items: center;
    bottom: 200px;
    left: 60px;
    height: 300px;
    width: 500px;
    color: white;
    font-family: Poppins;
    background-color: rgba( #2222, 0.5 );
    border-radius: 4px;
    flex-direction: column;
    overflow: hidden;

    &.open {
        pointer-events: all;
        backdrop-filter: blur( 16px );

        .msgArea {
            & > .history {
                .msgWrapper {
                    &.fadeOut {
                        opacity: 1;
                    }
                }
            }
        }
    }

    &:not(.open) {
        background-color: transparent;

        .entry {
            opacity: 0;
        }
    }

    .msgArea {
        height: 90%;
        width: 100%;
        padding: 4px 8px;

        .history {
            overflow-y: scroll;
            flex-direction: column;
            width: 100%;

            .msgWrapper {
                width: 100%;
                font-size: 12px;
                text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
                flex-shrink: 0;
                transition: opacity 0.5s ease-out;

                &.fadedOut {
                    transition: opacity 0s;
                }

                &.fadeOut {
                    opacity: 0;
                }

                .name {
                    margin-right: 4px;
                    font-weight: bold;
                    color: #ff5f5f;
                    flex-shrink: 0;

                    &.self {
                        color: #ffe35f;
                    }
                }

                .msg {
                }
            }
        }
    }

    .entry {
        width: 100%;
        height: 10%;
        font-size: 12px;
        color: white;
        background-color: rgba( #2222, 0.8 );
    }
}