tobspr_shapez.io/src/css/ingame_hud/building_placer.scss

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

    display: grid;

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

    background: rgba(#333438, 0.8);
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;

    .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;
        }
    }

    .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, 2px);
    }

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

#ingame_HUD_PlacerVariants {
    position: absolute;
    @include S(left, 10px);
    @include S(bottom, 80px);
    display: grid;
    grid-auto-flow: row;
    justify-items: start;
    @include S(grid-gap, 5px);

    .explanation {
        text-transform: uppercase;
        @include SuperSmallText;
        .keybinding {
            position: relative;
        }
    }

    .variant {
        @include S(border-radius, 4px);
        background: rgba(0, 10, 20, 0.1);
        display: flex;
        position: relative;
        align-items: center;
        @include S(padding, 5px);
        @include S(grid-gap, 10px);

        &.active {
            background-color: rgba(74, 163, 223, 0.6);
        }

        $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-w="3"] {
                @include S(width, 3 * $iconSize);
            }
            &[data-tile-w="4"] {
                @include S(width, 4 * $iconSize);
            }

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

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