#ingame_HUD_buildings_toolbar {
    position: fixed;
    @include S(bottom, 0px);
    left: 50%;
    transform: translateX(-50%);

    $toolbarBg: rgba($accentColorBright, 0.9);
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    background: transparent;
    border-bottom-width: 0;
    transition: transform 0.12s ease-in-out;

    background: uiResource("toolbar_bg.lossless.png") center center / 100% 100% no-repeat;
    @include S(padding, 20px, 100px, 0);

    &:not(.visible) {
        transform: translateX(-50%) translateY(#{D(100px)});
    }

    .buildings {
        display: grid;
        grid-auto-flow: column;
        @include S(padding, 0, 5px);

        .building {
            color: $accentColorDark;
            display: flex;
            flex-direction: column;
            position: relative;
            align-items: center;
            justify-content: center;
            @include S(padding, 5px);
            @include S(padding-bottom, 1px);
            $buildingIconSize: 32px;

            &:not(.unlocked) {
                @include S(width, 30px);
                .tooltip {
                    display: none !important;
                }
                .keybinding,
                .iconWrap {
                    opacity: 0.01;
                }
                &::before {
                    opacity: 0.5;
                    content: " ";
                    background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
                        no-repeat;
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 4;
                }
            }

            &.selected {
                background: rgba(74, 163, 223, 0.3) !important;
                transform: scale(1.05);
                .keybinding {
                    color: #111;
                }
            }

            pointer-events: all;
            transition: all 0.05s ease-in-out;
            transition-property: background-color, transform;
            &.unlocked:hover {
                background: rgba($accentColorDark, 0.1);
                cursor: pointer;
            }

            .iconWrap {
                position: relative;
                @include S(width, $buildingIconSize);
                @include S(height, $buildingIconSize);
                @include S(margin-top, 3px);
                @include S(margin-bottom, 6px);
            }

            .label {
                @include SuperSmallText;
                display: none;
                font-weight: bold;
                text-transform: uppercase;
            }

            &[data-tilewidth="2"] {
                .iconWrap {
                    @include S(width, 2 * $buildingIconSize);
                }
            }

            &:last-child {
                border: none;
            }
        }
    }
}