css(`
    searchbar- input::placeholder {
      color: #5C504D;
    }
`)

class SearchBar extends Shadow {
  render() {
    HStack(() => {
      input("Search", "80%")
        .attr({
          "type": "text"
        })
        .paddingVertical(0.75, em)
        .boxSizing("border-box")
        .paddingHorizontal(1, em)
        .background("var(--searchbackground)")
        .color("gray")
        .marginBottom(1, em)
        .border("1px solid color-mix(in srgb, var(--accent) 60%, transparent)")
        .borderRadius(100, px)
        .fontFamily("Arial")
        .fontSize(1, em)
        .outline("none")
        .cursor("not-allowed")
        .onTouch(function (start) {
            if(start) {
                this.style.backgroundColor = "var(--accent)"
            } else {
                this.style.backgroundColor = "var(--searchbackground)"
            }
        })

      p("+")
        .fontWeight("bolder")
        .paddingVertical(0.75, em)
        .boxSizing("border-box")
        .paddingHorizontal(1, em)
        .background("var(--searchbackground)")
        .color("var(--accent)")
        .marginBottom(1, em)
        .border("1px solid var(--accent)")
        .borderRadius(15, px)
    })
      .width(100, pct)
      .horizontalAlign("center")
      .verticalAlign("center")
      .gap(0.5, em)
  }
}

register(SearchBar)