@import "/UI/Style.scss";

Scoreboard {
    position: absolute;
    width: 1200px;
    height: 900px;
    flex-direction: column;
    gap: 10px;
    font-family: $font-main;
    color: $white;
    transition:
        transform 0.25s ease-in-out,
        opacity 0.2s ease-in-out;
    transform: scaleY(0);
    opacity: 0;

    &.visible {
        transform: scaleY(1);
        transform-origin: center;
        opacity: 1;
        pointer-events: all;
    }

    p {
        &.dark {
            color: $white-dark;
        }

        &.yellow {
            color: $score;
        }
    }

    > .top {
        flex-direction: row;
        height: 90px;
        flex-wrap: wrap;
        background-color: $gray-darker;
        z-index: 2;

        .padding {
            flex-grow: 1;
            height: 100%;
            background-color: $gray-darker;
            align-items: center;
            padding: 0px 60px;
        }

        .timer {
            width: 250px;
            height: 100%;
            justify-content: center;
            align-items: center;
            background-color: $gray-brighter;
            font-size: 48px;
        }
    }

    > .content {
        width: 100%;
        height: 100%;
        flex-direction: column;

        > .header {
            background-color: $gray-brighter;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            padding: 10px 40px;
            font-size: 32px;

            > .title {
                gap: 10px;
                text-transform: uppercase;
            }

            > .players {
                align-items: center;
                justify-content: center;
                text-align: center;
                font-size: 24px;
                gap: 16px;

                p {
                    height: 100%;
                }
            }
        }

        > .player-list {
            height: 100%;
            width: 100%;
            background-color: $gray;
            flex-direction: row;
            gap: 4px;
            font-size: 24px;
        }

        > .performance {
            position: relative;
            height: 150px;
            width: 100%;
            padding: 30px 50px 20px 40px;
            background: $gray-brighter;

            > .header {
                position: absolute;
                bottom: 100%;
                background-color: $white;
                color: $gray-darker;
                padding: 0px 25px;
                font-size: 28px;
                margin-bottom: -20px;
            }

            > .content {
                width: 100%;
                justify-content: space-between;
                flex-direction: row;

                > .profile {
                    flex-direction: row;
                    gap: 20px;
                    font-size: 32px;

                    > img {
                        border: 4px $gray-darker;
                        height: 100%;
                        aspect-ratio: 1;
                        background-size: 100%;
                    }

                    > .info {
                        color: $white;
                        flex-direction: column;

                        > .row {
                            font-size: 24px;
                            white-space: pre;
                        }
                    }
                }
            }
        }
    }
}