InteractionPromptHud {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: Poppins;
    pointer-events: none;
    display: none;

    &.show {
        display: flex;
    }

    // Sits below centre so it doesn't cover the crosshair or whatever
    // you're looking at.
    .prompt {
        position: absolute;
        bottom: 220px;
        left: 0px;
        width: 100%;
        flex-direction: column;
        align-items: center;

        .text {
            font-size: 22px;
            font-weight: bold;
            color: white;
            text-shadow: 0px 0px 12px rgba( black, 0.9 );
            margin-bottom: 8px;
        }

        .bar {
            width: 220px;
            height: 6px;
            background-color: rgba( black, 0.55 );
            border-radius: 3px;
            overflow: hidden;
        }

        // Width is set from code as a fraction. Stays invisible until the
        // hold actually starts, so an idle prompt doesn't sit there with a
        // distracting empty bar under it.
        .fill {
            height: 100%;
            width: 0%;
            background-color: #4fc3f7;
            border-radius: 3px;
            opacity: 0;

            &.active {
                opacity: 1;
            }
        }
    }
}