#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 {
        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);
        }
    }

    &:not(.placementActive) .binding.placementOnly,
    &.mapOverviewActive .binding.placementOnly {
        display: none;
    }

    &.placementActive:not(.mapOverviewActive) .noPlacementOnly {
        display: none;
    }

    &:not(.mapOverviewActive) .binding.overviewOnly {
        display: none;
    }

    &.mapOverviewActive .noOverviewOnly {
        display: none;
    }

    &:not(.hasDirectionLock) .binding.directionLock {
        display: none;
    }

    &.hasDirectionLock .noDirectionLock {
        display: none;
    }

    .binding.placementOnly,
    &:not(.placementActive) .binding.noPlacementOnly {
        transform-origin: 0% 50%;
        @include InlineAnimation(0.3s ease-in-out) {
            0% {
                color: $colorRedBright;
                transform: scale(1.2);
            }
        }
    }

    .keybinding.builtinKey {
        transition: all 0.1s ease-in-out;
        transition-property: background-color, color, border-color;
        background: $colorRedBright;
        border-color: $colorRedBright;
        color: #fff;
    }
}

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