---
// Properties
const {Query, QueryText} = Astro.props
---

<form class="search-box" action="/api/search/web" method="post">
    <input name="websearch" value={QueryText} placeholder="Search"/>
</form>

<style lang="scss">
.search-box {
    background: var(--box-background);
    border: 1px rgb(192, 192, 192) solid;
    border-radius: 3rem;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    position: relative;
    max-width: 500px;
    width: 300px;
    input {
        color: var(--text);
        position: absolute;
        top: 0px;
        left: 0px;
        width: calc(100% - 24px);
        height: 28px;
        border-radius: 3rem;
        border: none;
        background: transparent;
        padding: 0px 12px;
        border: 1px transparent solid;
        &:focus {
            outline: none;
        }
    }
}
</style>