@import '/UI/Style.scss';

SelectedLobby {
    position: relative;
    height: 150px;
    background-color: $light-gray;

    >.header {
        position: absolute;
        padding: 3px 35px;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        color: $gray-darker;
        background-color: $white;
        transform: translateY(-50%);
        left: 20px;
    }

    >.info {
        width: 70%;
        padding: 10px 70px;
        align-items: flex-end;
        white-space: pre;
        text-transform: uppercase;

        img {
            height: 70px;
            aspect-ratio: 1;
            border: 5px $gray-darkerer;
            margin-right: 5px;
        }

        .text {
            height: 70px;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
            font-size: 18px;
            color: $white-dark;

            .important {
                color: $white;
            }
        }
    }

    >.connect {
        width: 30%;
        padding: 0px 50px;
        justify-content: flex-end;
        align-items: center;
    }
}