css(`
    forum- input::placeholder {
        font-size: 0.9em;
        color: var(--accent);
    }
`)

class Forum extends Shadow {

    render() {
        ZStack(() => {
            p("Coming Soon!")
                .position("absolute")
                .x(50, vw).y(50, vh)
                .transform("translate(-50%, -50%)")

            HStack(() => {
                input("Search...", "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)")
            })
            .x(50, vw).y(5, vh)
            .position("absolute")
            .transform("translateX(-50%)")
        })
        .width(100, "%")
        .height(100, "%")
    }

    connectedCallback() {
        // Optional additional logic
    }
}

registerShadow(Forum)