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

#ingame_HUD_PinnedShapes {
    position: absolute;
    @include S(left, 9px);
    @include S(top, 150px);
    @include PlainText;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    > .shape {
        position: relative;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr 1fr;
        @include S(margin-bottom, 4px);
        color: #333438;
        // text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);

        &.unpinable {
            > canvas {
                cursor: pointer;
                pointer-events: all;
            }
        }

        > canvas {
            @include S(width, 25px);
            @include S(height, 25px);
            grid-column: 1 / 2;
            grid-row: 1 / 3;
            pointer-events: all;
            transition: transform 0.1s ease-in-out;
            transform-origin: D(2px) center;
            will-change: transform;
            position: relative;
            z-index: 20;
            &:hover {
                transform: scale(2);
                z-index: 21;
            }
        }

        > .amountLabel,
        > .goalLabel {
            @include S(margin-left, 5px);
            @include SuperSmallText;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            flex-direction: row;
            grid-column: 2 / 3;
            @include S(height, 9px);

            @include DarkThemeOverride {
                color: #eee;
            }
        }

        > .goalLabel {
            @include S(font-size, 7px);
            opacity: 0.9;
            align-self: start;
            justify-self: start;
            font-weight: normal;
            grid-row: 2 / 3;
        }

        > .amountLabel {
            align-self: end;
            justify-self: start;
            grid-row: 1 / 2;
        }

        > .infoButton {
            @include S(width, 8px);
            @include S(height, 8px);
            background: uiResource("icons/info_button.png") center center / 95% no-repeat;
            position: absolute;
            opacity: 0.7;
            @include S(top, 13px);
            @include S(left, -7px);
            @include DarkThemeInvert;
            @include IncreasedClickArea(2px);
            transition: opacity 0.12s ease-in-out;
            z-index: 100;

            &:hover {
                opacity: 0.8;
            }
        }

        &.goal,
        &.blueprint {
            .amountLabel::after {
                content: " ";
                position: absolute;
                display: inline-block;
                @include S(width, 8px);
                @include S(height, 8px);
                @include S(top, 4px);
                @include S(left, -7px);
                background: center center / contain no-repeat;
            }

            &.goal .amountLabel {
                &::after {
                    background-image: uiResource("icons/current_goal_marker.png");
                    background-size: 90%;
                }
                @include DarkThemeOverride {
                    &::after {
                        background-image: uiResource("icons/current_goal_marker_inverted.png") !important;
                    }
                }
            }

            &.blueprint .amountLabel {
                &::after {
                    background-image: uiResource("icons/blueprint_marker.png");
                    background-size: 90%;
                }
                @include DarkThemeOverride {
                    &::after {
                        background-image: uiResource("icons/blueprint_marker_inverted.png") !important;
                    }
                }
            }
        }

        &.completed {
            opacity: 0.5;
        }
    }
}