@import "theme";

CarBoostHud
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    pointer-events: none;

    // Smoked-glass pills, matching the timer/lap/standings pills.
    .boost-pill, .item-pill
    {
        position: absolute;
        bottom: $deadzone-y;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        background-color: $pill-dark;
        border-radius: $pill-radius;
        backdrop-filter: blur( 4px );
        z-index: 60;
    }

    // Boost bar bottom-left, held item bottom-centre.
    .boost-pill
    {
        left: $deadzone-x;
    }

    .item-pill
    {
        left: 50%;
        transform: translateX( -50% );
    }

    .fuel-bar
    {
        width: 140px;
        height: 10px;
        border-radius: 5px;
        background-color: rgba( 0, 0, 0, 0.35 );
        border: 1px solid rgba( 255, 255, 255, 0.25 );
        flex-direction: row;
        overflow: hidden;
    }

    .fuel-fill
    {
        height: 100%;
        border-radius: 5px;
        background-color: $accent-yellow;
        transition: width 0.08s linear, background-color 0.12s ease-out;
    }

    .boost-glyph
    {
        width: 40px;
        height: 40px;
        text-shadow: $hud-shadow;
        transition: opacity 0.12s ease-out;
    }

    // Held pickup item - only present in the DOM while an item is held.
    // Circular backing plate behind the icon.
    .item-badge
    {
        width: 56px;
        height: 56px;
        border-radius: 28px;
        background-color: rgba( 0, 0, 0, 0.45 );
        border: 2px solid rgba( 255, 255, 255, 0.25 );
        box-shadow: $hud-shadow;
        justify-content: center;
        align-items: center;
    }

    .item-icon
    {
        width: 50px;
        height: 50px;
    }

    .item-glyph
    {
        width: 40px;
        height: 40px;
        text-shadow: $hud-shadow;
    }

    // Not enough fuel to dash - read as muted/unavailable.
    .boost-pill.depleted
    {
        .fuel-fill { background-color: $hud-text-muted; }
        .boost-glyph { opacity: 0.4; }
    }

    // Brief flash on dash.
    .boost-pill.dashing .fuel-fill
    {
        background-color: $accent-cyan;
    }
}