#ingame_HUD_PlacementHints {
    position: fixed;
    @include S(top, 60px);
    @include S(right, 10px);

    display: grid;

    @include S(padding, 6px);
    @include S(border-radius, $globalBorderRadius);
    @include S(width, 240px);
    @include S(grid-column-gap, 5px);

    background: $ingameHudBg;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;

    // @include DarkThemeOverride {
    //     // background-color: #55585a;
    // }

    transition: opacity 0.1s ease-out;
    &.hovered {
        opacity: 0.1;
        .buildingImage {
            opacity: 0;
        }
    }

    .buildingLabel {
        @include PlainText;
        @include S(margin-bottom, 2px);
        color: #fff;
        text-transform: uppercase;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .description {
        color: #bbb;
        @include SuperSmallText;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        display: grid;
        grid-template-rows: 1fr auto;

        strong {
            color: #fff;
        }
    }

    .additionalInfo {
        display: grid;
        grid-template-columns: auto 1fr;

        label {
            color: lighten($colorGreenBright, 10);
            font-weight: bold;
            @include S(margin-right, 5px);
        }
    }

    .hotkey {
        color: lighten($colorGreenBright, 10);
        font-weight: bold;
        display: flex;
        flex-direction: row;
        align-items: center;
        .keybinding {
            position: relative;
            @include S(margin-left, 5px);
        }
    }

    .buildingImage {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        @include S(width, 100px);
        @include S(height, 100px);
        background: top left / 100% 100% no-repeat;
        @include S(border-radius, $globalBorderRadius);
        transition: opacity 0.1s ease-in-out;
    }

    @include StyleBelowWidth(700px) {
        display: none !important;
    }

    &.compact {
        width: unset !important;
        grid-template-columns: 1fr;
        .buildingImage,
        .description > .text {
            display: none;
        }
    }
}

#ingame_HUD_PlacerVariants {
    position: absolute;
    @include S(right, 10px);
    @include S(top, 200px);
    display: flex;
    @include S(grid-gap, 5px);
    flex-direction: column;
    align-items: flex-end;

    &.compact {
        @include S(top, 150px);
    }

    .explanation {
        text-transform: uppercase;
        grid-row: 1 / 2;
        @include SuperSmallText;
        text-align: right;
        .keybinding {
            position: relative;
        }
        font-weight: bold !important;

        @include DarkThemeOverride {
            color: rgba(#fff, 0.5);
        }
    }

    .variants {
        display: grid;
        @include S(grid-gap, 5px);

        .variant {
            pointer-events: all;
            cursor: pointer;

            grid-row: 2 / 3;
            @include S(border-radius, $globalBorderRadius);
            background: rgba($ingameHudBg, 0.5);
            opacity: 0.5;
            display: inline-flex;
            vertical-align: top;
            position: relative;
            align-items: center;
            @include S(padding, 3px);
            @include S(grid-gap, 10px);

            transition: background-color 0.12s ease-in-out;

            &:hover:not(.active) {
                background: rgba($colorBlueBright, 0.8);
                opacity: 1;
            }

            &.active {
                opacity: 1;
                background-color: rgba($colorBlueBright, 0.8);
            }

            $iconSize: 25px;

            .iconWrap {
                grid-column: 1 / 2;
                grid-row: 1 / 2;
                position: relative;
                @include S(width, $iconSize);
                @include S(height, $iconSize);
                background: center center / contain no-repeat;

                &[data-tile-w="2"] {
                    @include S(width, 2 * $iconSize);
                }
                &[data-tile-h="2"] {
                    @include S(height, 2 * $iconSize);
                }
                &[data-tile-h="3"] {
                    @include S(height, 3 * $iconSize);
                }
                &[data-tile-w="3"] {
                    @include S(width, 3 * $iconSize);
                }
                &[data-tile-w="4"] {
                    @include S(width, 4 * $iconSize);
                }
            }

            .label {
                display: none;
                grid-column: 2 / 3;
                text-transform: uppercase;
                grid-row: 1 / 2;
                @include SuperSmallText;
                color: #fff;
            }
        }
    }
}