<script>
    import Icon from "./icon.svelte";
    import SearchIcon from "$lib/images/icons/ui/search.svg";
</script>

<div class="searchbar">
    <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
    <input class="searchbar__input" type="text" placeholder="Search stuff...">
</div>

<style>
    .searchbar {

        position: absolute;
        display: flex;
        align-items: center;

        background-color: var(--col_panel_field);
        border-radius: 30px;


        height: 36px;
        padding: 10px;
        margin-inline: auto auto;
    }

    .searchbar__input {
        border: none;
        background-color: transparent;
        color: var(--col_text_panel);

        font-size: 16px;
    }

    .searchbar__input:focus {
        outline: none;
    }

</style>