css(`
    input-box {
        display: block;
        width: 60vw;
        position: fixed;
        left: 20vw;
        bottom: 2vw;
    }

    .input {
        width: 100%;
        background-color: var(--accent2);
        opacity: 0.5;
        border-radius: 12px;
        border: none;
        resize: none;
        color: var(--orange);
        padding: 1em;
        height: 1em;
        outline: none;
        transition: opacity .1s, scale .1s
    }

    .input:focus {
        opacity: 80%;
        scale: 1.02
    }
`)

export default class InputBox extends HTMLElement {
    hovered = false

    connectedCallback() {
        this.render()
        this.addListeners()
    }

    render() {
        this.innerHTML = /* html */`
            <textarea class="input"></textarea>
        `
    }

    addListeners() {
        this.$("textarea").addEventListener("keydown", (e) => {
            if(e.key === "Enter") {
                e.preventDefault()
                e.target.blur()
            }
        })
    }
}

customElements.define("input-box", InputBox)