@import "theme";
@import "avatar";

StandingsPills
{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    .standing-row
    {
        flex-direction: row;
        align-items: center;
        height: 40px;
        gap: 10px;

        // Extra space separating a detached leader row from the local window below it.
        &.detached
        {
            margin-bottom: 14px;
        }

        .row-pos
        {
            min-width: 28px;
            justify-content: flex-end;
            font-family: $display-font;
            font-size: 21px;
            font-weight: 900;
            color: white;
            text-shadow: $hud-shadow;
        }

        .row-pill
        {
            flex-direction: row;
            align-items: center;
            gap: 10px;
            height: 100%;
            padding: 0 18px 0 12px;
            background-color: $pill-dark;
            border-radius: $pill-radius;
            backdrop-filter: blur( 4px );

            .color-bar
            {
                width: 5px;
                height: 22px;
                border-radius: 3px;
                flex-shrink: 0;
            }

            .row-name
            {
                font-family: $header-font;
                font-size: 15px;
                font-weight: 700;
                color: white;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                max-width: 200px;
            }
        }

        // Non-local rows sit back a little so the local pill reads first.
        &:not(.local)
        {
            opacity: 0.8;
        }

        &.local
        {
            .row-pill
            {
                background-color: $surface-deep;
                box-shadow: 0px 4px 12px $shadow-chunky;

                .row-name
                {
                    color: $text-default;
                }
            }

            .avatar-wrap
            {
                @include avatar(26px);
            }

            .player-initial
            {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                flex-shrink: 0;
                align-items: center;
                justify-content: center;
                font-family: $display-font;
                font-size: 13px;
                font-weight: 800;
                color: white;
            }
        }

        &.ghost
        {
            opacity: 0.6;
        }
    }
}