css(`
    market- {
        font-family: 'Bona';
    }

    market- input::placeholder {
        font-family: 'Bona Nova';
        font-size: 0.9em;
        color: var(--accent);
    }

    input[type="checkbox"] {
        appearance: none;        /* remove default style */
        -webkit-appearance: none;
        width: 1em;
        height: 1em;
        border: 1px solid var(--accent);
    }

    input[type="checkbox"]:checked {
        background-color: var(--red);

    }
`)

class Market extends Shadow {

    render() {
        ZStack(() => {
            HStack(() => {
                VStack(() => {
                    HStack(() => {
                        input()
                            .attr({
                                "type": "checkbox",
                                "id": "hyperia-check"
                            })
                        label("Hyperia-Made")
                            .attr({
                                "for": "hyperia-check"
                            })
                            .marginLeft(0.5, em)
                    })
                    HStack(() => {
                        input()
                            .attr({
                                "type": "checkbox",
                                "id": "america-check"
                            })
                        label("America-Made")
                            .attr({
                                "for": "america-check"
                            })
                            .marginLeft(0.5, em)
                    })
                })
                .paddingLeft(3, em)
                .gap(1, em)
            })
            .width(100, "%")
            .x(0).y(25, vh)

            p("0 Items")
                .position("absolute")
                .x(50, vw).y(50, vh)
                .transform("translate(-50%, -50%)")

            HStack(() => {
                input("Search for products...", "50vw")
                    .attr({
                        "type": "text"
                    })
                    .fontSize(1.1, em)
                    .paddingLeft(1.3, em)
                    .background("transparent")
                    .border("1px solid var(--accent)")
                    .outline("none")
                    .color("var(--accent)")
                    .borderRadius(10, px)
                button("Search")
                    .marginLeft(2, em)
                    .borderRadius(10, px)
                    .background("transparent")
                    .border("1px solid var(--accent)")
                    .color("var(--accent)")
                    .fontFamily("Bona Nova")
            })
            .x(50, vw).y(5, vh)
            .position("absolute")
            .transform("translateX(-50%)")
        })
        .width(100, "%")
        .height(100, "%")
    }

    connectedCallback() {
        // Optional additional logic
    }
}

registerShadow(Market)