@import "/UI/Styles/Theme.scss";

Chat {
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.chat-container {
    width: 400px;

    .message, .input label, .playername {
        text-transform: none;
    }

    .when-open {
        display: none;
    }

    .when-not-open {
        display: flex;
    }
}

Chat.open
{
    .chat-container
    {
        background-color: $background;
        backdrop-filter: $blur;
        border-top: 1px solid $terror-color;
        border-bottom: 1px solid $terror-color;

        .when-open
        {
            display: flex;
        }

        .when-not-open
        {
            display: none;
        }
    }
}