@import '/UI/Style.scss';

ScoreBar {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 10px 5px;
    gap: 10px;

    >.client {
        flex-direction: column;

        .outline {
            height: 64px;
            aspect-ratio: 1;
            background-color: $gray-brighter;
            justify-content: center;
            align-items: center;
        }

        &.gold {
            .outline {
                background-color: $gold;
            }
        }

        &.silver {
            .outline {
                background-color: $silver;
            }
        }

        &.bronze {
            .outline {
                background-color: $bronze;
            }
        }

        img {
            height: 55px;
            aspect-ratio: 1;
            border: 3px;
            border-color: $gray-darker;
        }

        text {
            font-size: 20px;
            width: 100%;
            background-color: $gray-darkerer;
            color: $chat-default;
            text-align: center;
            padding-top: 1px;
        }
    }
}