@import 'colours.less';

.player-box {
    display: grid;
    overflow: hidden;
    grid-template-areas:
        "msg"
        "img"
        "name"
        "score"
        "ctrl";

    grid-template-rows: min-content 1fr min-content min-content min-content;

    &.top {
        grid-template-areas:
            "ctrl"
            "score"
            "name"
            "img"
            "msg";

        grid-template-rows: min-content min-content min-content 1fr min-content;
    }

    .score {
        grid-area: score;
        display: flex;
        justify-content: space-around;
        text-align: center;

        span {
            flex: 1;
        }
    }

    .img {
        grid-area: img;
    }

    .ctrl {
        grid-area: ctrl;
    }

    .msg {
        grid-area: msg;
        color: @white;
    }

    &.winner {
        color: @yellow;
        font-weight: bold;
    }
}

.chat {
    justify-content: flex-end;
}