.leaderboard
    {
        flex-direction: column;
        // position: absolute;
        // top: 16px;
        // left: 16px;
        width: 32px;
        height: 32px;
        padding: 16px;

        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        font-family: Verdana;
        font-size: 18px;
        align-items: center;

        transition: width 0.2s ease-out, height 0.2s ease-out;
        z-index: 200;

        &.open
        {
            width: 500px;
            height: 300px;

            sound-in: ui.navigate.forward;
            sound-out: ui.navigate.back;

            h1
            {
                opacity: 1;
            }

            .leaderboard-header
            {
                opacity: 1;
            }

            .leaderboard-entries
            {
                opacity: 1;
            }
        }

        .open-close
        {
            position: absolute;
            top: 4px;
            left: 4px;
            width: 24px;
            height: 24px;
            cursor: pointer;
            pointer-events: all;

            i
            {
                position: absolute;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                text-align: center;
                opacity: 1;
                transition: all 0.2s ease-out;
                &.hide
                {
                    opacity: 0;
                }
            }
        }

        h1
        {
            opacity: 0;
            font-weight: black;
            font-size: 24px;
            margin-bottom: 4px;
            text-overflow: clip;
            white-space: nowrap;
            transition: all 0.2s ease-out;
            flex-shrink: 0;
        }

        .leaderboard-header
        {
            width: 100%;
            background-color: rgba(white, 0.3);
            color: black;
            padding: 4px;
            opacity: 0;
            text-overflow: clip;
            white-space: nowrap;
            transition: all 0.2s ease-out;
            font-size: 16px;
            font-weight: black;
            flex-shrink: 0;

            .name
            {
                width: 50%;
            }

            .pizzas, .pizzas-per-second
            {
                width: 25%;
            }
        }

        .leaderboard-entries
        {
            flex-grow: 1;
            flex-direction: column;
            background-color: rgba(black, 0.4);
            opacity: 0;
            transition: all 0.2s ease-out;
            overflow-y: scroll;
            pointer-events: all;

            .leaderboard-entry
            {
                flex-shrink: 0;
                padding: 4px;
                font-size: 18px;

                label
                {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

                .name
                {
                    width: 50%;
                }

                .pizzas, .pizzas-per-second
                {
                    width: 25%;
                }
            }
        }
    }