@import "theme";

LapCounter
{
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 2px;

    .lap-text
    {
        flex-direction: row;
        align-items: center;
        gap: 4px;

        .lap-label
        {
            font-family: $header-font;
            font-size: 16px;
            font-weight: 800;
            color: $hud-text;
            letter-spacing: 2px;
            text-shadow: $hud-shadow;
        }

        .lap-current
        {
            font-family: $display-font;
            font-size: 22px;
            font-weight: 800;
            color: $hud-text;
            text-shadow: $hud-shadow;
        }

        .lap-separator
        {
            font-family: $display-font;
            font-size: 16px;
            font-weight: 600;
            color: $hud-text-muted;
        }

        .lap-total
        {
            font-family: $display-font;
            font-size: 16px;
            font-weight: 600;
            color: $hud-text-muted;
        }
    }

    .segments
    {
        flex-direction: row;
        gap: 4px;

        .segment
        {
            width: 48px;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            overflow: hidden;

            .segment-fill
            {
                height: 100%;
                background-color: $accent-red;
                border-radius: 4px;
                transition: width 0.3s ease;
            }

            &.complete .segment-fill
            {
                background-color: $accent-pink;
            }
        }
    }
}