@import "theme";

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

    // Smoked-glass pill, bottom-left above the boost pill.
    .horn-pill
    {
        position: absolute;
        left: $deadzone-x;
        bottom: calc( $deadzone-y + 72px );
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        background-color: $pill-dark;
        border-radius: $pill-radius;
        backdrop-filter: blur( 4px );
        transform-origin: center;
        transform: scale( 1 );
        transition: transform 0.12s ease-out, background-color 0.12s ease-out;
        z-index: 60;
    }

    // Scales up while the horn is held.
    .horn-pill.beeping
    {
        transform: scale( 1.18 );
        background-color: $pill-hover;
    }

    .horn-icon
    {
        font-size: 28px;
        text-shadow: $hud-shadow;
    }

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