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

#ingame_HUD_Shop {
    .content {
        @include S(padding-right, 10px);
        display: flex;
        flex-direction: column;
        @include S(width, 500px);

        .upgrade {
            display: grid;
            grid-template-columns: auto 1fr auto;
            background: #eee;
            @include S(border-radius, $globalBorderRadius);
            @include S(margin-bottom, 4px);
            @include S(padding, 5px, 10px);
            @include S(grid-row-gap, 1px);
            @include S(height, 85px);
            grid-template-rows: #{D(20px)} auto;

            &:last-child {
                margin-bottom: 0;
            }

            @include DarkThemeOverride {
                background: $darkModeControlsBackground;
            }

            .title {
                grid-column: 1 / 3;
                grid-row: 1 / 2;
                @include PlainText;
                display: flex;
                align-items: center;
                flex-direction: row-reverse;
                justify-content: flex-end;

                @include DarkThemeOverride {
                    color: #fff;
                }

                .tier {
                    @include S(margin-right, 9px);
                    background: $colorGreenBright;
                    @include S(border-radius, $globalBorderRadius);
                    text-transform: uppercase;
                    @include PlainText;
                    color: #fff;
                    text-align: center;
                    font-weight: bold;
                    @include S(min-width, 50px);
                    @include S(padding, 0px, 5px);

                    &[data-tier="0"] {
                        background-color: rgb(73, 186, 190);
                    }
                    &[data-tier="1"] {
                        background-color: rgb(88, 110, 207);
                    }
                    &[data-tier="2"] {
                        background-color: rgb(189, 100, 192);
                    }
                    &[data-tier="3"] {
                        background-color: rgb(117, 192, 98);
                    }
                    &[data-tier="4"] {
                        background-color: rgb(243, 77, 48);
                    }
                    &[data-tier="5"] {
                        background-color: rgb(255, 209, 6);
                    }
                    &[data-tier="6"] {
                        background-color: rgb(44, 41, 46);
                    }
                }
            }

            .icon {
                @include S(width, 40px);
                @include S(height, 40px);
                background: center center / 80% no-repeat;
                align-self: center;
                justify-self: center;
                grid-column: 1 / 2;
                grid-row: 2 / 4;
                @include S(margin-right, 30px);
                @include S(margin-left, 10px);
                opacity: 0.32;
                display: none;
            }

            .description {
                grid-column: 2 / 4;
                grid-row: 1 / 2;
                @include PlainText;
                color: #aaa;
                align-self: start;
                justify-self: end;
            }

            .requirements {
                grid-column: 2 / 3;
                grid-row: 3 / 4;
                display: grid;
                grid-auto-flow: column;
                @include S(grid-gap, 9px);
                justify-content: start;

                .requirement {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    @include S(width, 70px);
                    overflow: hidden;

                    button.pin {
                        & {
                            /* @load-async */
                            background: uiResource("icons/pin.png") center center / 95% no-repeat;
                        }

                        @include S(width, 12px);
                        @include S(height, 12px);
                        position: absolute;
                        @include S(top, 2px);
                        @include S(right, 2px);
                        opacity: 0.6;
                        cursor: pointer;
                        pointer-events: all;
                        @include IncreasedClickArea(5px);
                        transition: opacity 0.12s ease-in-out;

                        @include DarkThemeInvert;

                        $disabledOpacity: 0.6;
                        $enabledOpacity: 0.6;

                        &:hover {
                            opacity: $enabledOpacity + 0.1;
                        }

                        &.alreadyPinned {
                            opacity: $disabledOpacity !important;

                            &:hover {
                                opacity: $disabledOpacity + 0.1 !important;
                            }
                        }

                        &.isGoal {
                            /* @load-async */
                            background: uiResource("icons/current_goal_marker.png") center center / 95%
                                no-repeat;
                            opacity: $disabledOpacity !important;
                            cursor: default;
                            pointer-events: none;
                        }

                        &.pinned {
                            opacity: $disabledOpacity;

                            & {
                                /* @load-async */
                                background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important;
                            }

                            @include InlineAnimation(0.3s ease-in-out) {
                                0% {
                                    opacity: 1;
                                    transform: scale(0.8);
                                }

                                30% {
                                    opacity: 1;
                                    transform: scale(1.2);
                                }

                                100% {
                                    transform: scale(1);
                                }
                            }
                            &:hover {
                                opacity: $disabledOpacity + 0.1;
                            }
                        }

                        &.unpinned {
                            opacity: $enabledOpacity;
                            @include InlineAnimation(0.3s ease-in-out) {
                                0% {
                                    opacity: 1;
                                    transform: scale(0.8);
                                }

                                30% {
                                    opacity: 1;
                                    transform: scale(1.2);
                                }

                                100% {
                                    transform: scale(1);
                                }
                            }
                            &:hover {
                                opacity: $enabledOpacity + 0.1;
                            }
                        }
                    }

                    button.showInfo {
                        @include S(width, 11px);
                        @include S(height, 11px);
                        position: absolute;
                        @include S(top, 17px);
                        @include S(right, 2.5px);
                        opacity: 0.5;
                        cursor: pointer;
                        pointer-events: all;
                        @include IncreasedClickArea(5px);
                        transition: opacity 0.12s ease-in-out;
                        @include DarkThemeInvert;

                        &:hover {
                            opacity: 0.6;
                        }
                    }
                    button.showInfo {
                        /* @load-async */
                        background: uiResource("icons/info_button.png") center center / 95% no-repeat;
                    }

                    canvas {
                        @include S(width, 40px);
                        @include S(height, 40px);
                    }

                    .amount {
                        @include S(margin-top, 4px);
                        z-index: 10;
                        @include SuperSmallText;
                        letter-spacing: 0;
                        background: #e2e4e6;

                        @include S(line-height, 13px);
                        @include S(border-radius, $globalBorderRadius);
                        @include S(padding, 1px, 0px, 2px);
                        position: relative;
                        text-align: center;
                        @include S(min-width, 50px);
                        // @include S(max-width, 100px);
                        overflow: hidden;
                        width: 100%;

                        @include DarkThemeOverride {
                            background: #333438;
                            color: #fff;
                        }

                        .progressBar {
                            bottom: 0;
                            left: 0;
                            right: 0;
                            top: 0;
                            @include S(border-radius, $globalBorderRadius);
                            position: absolute;
                            display: inline-block;
                            z-index: -1;
                            transition: all 0.2s ease-in-out;
                            transition-property: width, background-color;
                            background: #bdbfca;

                            @include DarkThemeOverride {
                                background: #8c8d96;
                            }

                            &.complete {
                                background-color: $colorGreenBright;

                                @include DarkThemeOverride {
                                    background-color: $colorGreenBright;
                                }
                            }
                        }
                    }
                }
            }

            button.buy {
                grid-column: 3 / 4;
                grid-row: 3 / 4;
                align-self: center;
                justify-self: end;
                // @include S(padding, 4px, 5px);
                // @include PlainText;
                background-color: $colorGreenBright;
                color: #fff;

                transition: all 0.2s ease-in-out;
                transition-property: background-color, opacity;

                &:not(.buyable) {
                    background-color: #aaa;
                    cursor: default;
                    pointer-events: none;
                    opacity: 0.3;
                }

                &.buyable {
                    @include InlineAnimation(1s ease-in-out infinite) {
                        0% {
                        }

                        50% {
                            background-color: lighten($colorGreenBright, 10);
                            transform: scale(1.02);
                        }
                        100% {
                        }
                    }
                }
            }

            &.maxLevel {
                button.buy {
                    opacity: 0 !important;
                }
                .requirements {
                    display: none;
                }
                .description {
                    color: $colorGreenBright;
                }
            }
        }
    }
}