@import "/UI/HUD/HUD.razor.scss";

SandboxSpawnerMenu {
    background-color: rgb(45, 45, 50);
    flex-direction: column;
    pointer-events: all;
    border-radius: 10px;
    border: 4px solid rgb(100, 150, 200);
    text-shadow: 2px 2px 2px black;
    box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.75);

    .title-bar {
        align-items: center;
        justify-content: space-between;
        // margin-bottom: 8px;
        background-color: hsl(220, 15%, 15%);
        border-radius: 4px;
        height: 10%;
        width: 100%;
        padding-left: 8px;
        flex-direction: row;

        .title-label {
            height: 100%;
            align-items: center;
            justify-content: center;
            padding: 8px;
            color: white;
            font-weight: bold;
        }

        .close-button {
            height: 100%;
            width: 50px;
            background-color: hsl(0, 0%, 46%);
            border-radius: 4px;
            border: 1px black;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: white;
            font-size: 48px;

            &:hover {
                background-color: hsl(0, 100%, 50%);
            }
        }
    }

    .tag-filters {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
        justify-content: center;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        border-top: 2px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        height: 30%;

        .tag-button {
            padding: 0 10 0 10;
            border-radius: 4px;
            background-color: rgba(100, 150, 200, 0.3);
            border: 2px solid rgba(100, 150, 200, 0.5);
            color: white;
            cursor: pointer;
            font-size: 24px;
            font-weight: bold;
            transition: all 0.2s ease;

            &:hover {
                background-color: rgba(100, 150, 200, 0.5);
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(100, 150, 200, 0.4);
                sound-in: ui.button.over;
            }

            &:active {
                sound-in: ui.button.press;
                background-color: rgba(46, 67, 89, 0.5);
            }
            &.selected {
                background-color: rgb(61, 129, 63);
            }
        }
    }

    .size-controls {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 16px;
        border-bottom: 2px solid rgba(255, 255, 255, 0.05);
        width: 100%;
        height: 15%;

        .size-label {
            color: white;
            font-size: 24px;
            font-weight: bold;
            margin-right: 8px;
        }

        .size-button {
            padding: 0 10 0 10;
            justify-content: center;
            border-radius: 3px;
            background-color: rgba(100, 150, 200, 0.2);
            border: 2px solid rgba(100, 150, 200, 0.4);
            color: white;
            cursor: pointer;
            font-size: 24px;
            font-weight: bold;
            transition: all 0.2s ease;
            min-width: 32px;

            &:hover {
                background-color: rgba(100, 150, 200, 0.4);
                box-shadow: 0 4px 8px rgba(100, 150, 200, 0.4);
                transform: translateY(-2px);
                sound-in: ui.button.over;
            }
            

            &:active {
                sound-in: ui.button.press;
                background-color: rgba(46, 67, 89, 0.5);
            }
            
            &.selected {
                background-color: rgb(61, 129, 63);
            }
            
        }
        
    }

    .search-container {
        height: 12%;
        padding-top: 10px;
        width: 100%;
        justify-content: center;

        .text-entry {
            height: 100%;
            border-radius: 4px;
            font-size: 24px;
            width: 90%;
            
            background-color: hsl(220, 100%, 70%);
            border: none;
            color: black;

            .placeholder {
                color: rgb(255, 255, 255);
                font-weight: bolder;
            }

            &:focus {
                box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            }
        }
    }

    .models {
        padding: 16px;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 16px;

        // Small size
        &.small {
            gap: 4px;

            .model {
                width: 100px;
                height: 120px;
                padding: 4px;

                img {
                    width: 80px;
                    height: 80px;
                    margin-bottom: 4px;
                }

                .model-title {
                    font-size: 10px;
                }
            }
        }

        // Medium size (default)
        &.medium {
            gap: 8px;

            .model {
                width: 160px;
                height: 180px;
                padding: 8px;

                img {
                    width: 120px;
                    height: 120px;
                    margin-bottom: 8px;
                }

                .model-title {
                    font-size: 12px;
                }
            }
        }

        // Large size
        &.large {
            gap: 12px;

            .model {
                width: 275px;
                height: 280px;
                padding: 12px;

                img {
                    width: 160px;
                    height: 160px;
                    margin-bottom: 12px;
                }

                .model-title {
                    font-size: 14px;
                }
            }
        }

        .model {
            align-items: center;
            justify-content: center;
            flex-direction: column;
            border-radius: 8px;
            background-color: hsl(220, 10%, 25%);
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s ease;

            &:hover {
                background-color: hsl(220, 10%, 30%);
                border-color: rgb(100, 150, 200);
                transform: translateY(-4px);
                box-shadow: 0 6px 15px rgba(100, 150, 200, 0.3);
                sound-in: ui.button.over;
            }

            &:active {
                background-color: hsla(220, 100%, 60%, 0.6);
                sound-in: ui.button.press;
            }

            img {
                object-fit: cover;
                border-radius: 4px;
            }

            .model-title {
                color: white;
                font-weight: bold;
                text-align: center;
                width: 100%;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }

        .empty {
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 18px;
        }
    }
}