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

PodiumScreen
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
}

.podium-screen
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    padding: $deadzone-y $deadzone-x;
    font-family: $display-font;
    pointer-events: none;

    &.hidden
    {
        display: none;
    }

    .winner-section
    {
        position: absolute;
        bottom: $deadzone-y;
        align-self: center;
        flex-direction: column;
        align-items: center;
        gap: 16px;

        .race-over-pill
        {
            flex-direction: row;
            background-color: $text-default;
            color: white;
            font-family: $header-font;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 3px;
            padding: 5px 12px;
            border-radius: 14px;
        }

        .winner-tape
        {
            font-family: $header-font;
            font-size: 44px;
            font-weight: 800;
            color: $text-on-yellow;
            background-color: $accent-yellow;
            padding: 6px 14px;
            transform: rotate( -2deg );
            box-shadow: 0px 4px 10px rgba( 0, 0, 0, 0.18 );
        }
    }

    .standings
    {
        position: absolute;
        left: $deadzone-x;
        top: 50%;
        transform: translateY( -50% );
        width: 480px;
        flex-direction: column;
        gap: 5px;

        .standings-label
        {
            font-family: $header-font;
            font-size: 13px;
            font-weight: 800;
            color: $text-muted;
            letter-spacing: 4px;
            margin-bottom: 5px;
        }

        .row
        {
            flex-direction: row;
            align-items: center;
            gap: 10px;
            background-color: $surface-deep;
            border-radius: 12px;
            padding: 10px 14px;
            border: 2px solid transparent;
            box-shadow: 0px 2px 6px $shadow-soft;

            &.you
            {
                border-color: $accent-pink;
            }

            .pos-circle
            {
                width: 30px;
                height: 30px;
                border-radius: 15px;
                flex-shrink: 0;
                align-items: center;
                justify-content: center;
                font-family: $display-font;
                font-size: 15px;
                font-weight: 900;
                color: white;
                border: 2px solid rgba( 0, 0, 0, 0.15 );
            }

            &.pos-1 .pos-circle { background-image: linear-gradient( 180deg, #fff6a0 0%, #ffd700 40%, #b8860b 100% ); color: $text-on-yellow; }
            &.pos-2 .pos-circle { background-image: linear-gradient( 180deg, #f0f0f0 0%, #c0c0c0 40%, #808080 100% ); color: #3a3a3a; }
            &.pos-3 .pos-circle { background-image: linear-gradient( 180deg, #ffb87a 0%, #ff8c42 40%, #c55a11 100% ); color: white; }
            &.pos-4 .pos-circle, &.pos-5 .pos-circle, &.pos-6 .pos-circle,
            &.pos-7 .pos-circle, &.pos-8 .pos-circle { background-image: linear-gradient( 180deg, #aaaaaa 0%, #888888 40%, #555555 100% ); color: white; }

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

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

            .info
            {
                flex-direction: column;
                flex-grow: 1;
                min-width: 90px;

                .name-line
                {
                    flex-direction: row;
                    align-items: center;
                    gap: 6px;

                    .name
                    {
                        font-family: $header-font;
                        font-size: 15px;
                        font-weight: 800;
                        color: $text-default;
                    }
                }
            }

            .times
            {
                flex-direction: column;
                align-items: flex-end;
                flex-shrink: 0;

                .total
                {
                    font-family: $display-font;
                    font-size: 15px;
                    font-weight: 700;
                    color: $text-default;
                }

                .delta
                {
                    font-family: $header-font;
                    font-size: 14px;
                    font-weight: 600;
                    color: $accent-red;
                }

                .delta.leader
                {
                    color: $accent-orange;
                    border: none;
                }
            }

            .best
            {
                flex-direction: column;
                align-items: flex-end;
                flex-shrink: 0;

                .best-label
                {
                    font-family: $header-font;
                    font-size: 9px;
                    font-weight: 700;
                    color: $text-muted;
                    letter-spacing: 1px;
                }

                .best-time
                {
                    font-family: $display-font;
                    font-size: 13px;
                    font-weight: 700;
                    color: $text-default;
                }
            }
        }
    }
}