#ingame_HUD_KeybindingOverlay {
    position: absolute;
    @include S(top, 10px);
    @include S(left, 10px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #333438;
    // text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.1);

    @include DarkThemeOverride {
        color: #fff;
    }

    > .binding {
        &:not(.visible) {
            display: none !important;
        }

        display: inline-grid;
        @include PlainText;
        align-items: center;
        @include S(margin-bottom, 3px);
        grid-auto-flow: column;
        @include S(grid-gap, 2px);

        i {
            display: inline-block;
            @include S(height, 10px);
            width: 1px;
            @include S(margin, 0, 3px);
            background-color: #fff;
            transform: rotate(10deg);
            // @include S(margin, 0, 3px);
        }

        code {
            position: relative;
            top: unset;
            left: unset;
            margin: 0;
            &.rightMouse {
                background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;
            }

            &.leftMouse {
                background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
            }
        }

        label {
            color: #333438;
            @include SuperSmallText;
            text-transform: uppercase;
            // color: #fff;
            @include DarkThemeOverride {
                color: #fff;
            }

            @include S(margin-left, 5px);
        }
    }
}

body.uiHidden #ingame_HUD_KeybindingOverlay .binding:not(.hudToggle) {
    display: none;
}