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

    let classList = "";
    export { classList as class };
</script>

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

</div>

<style>
    .searchbar {
        display: flex;
        align-items: center;

        width: auto;
        height: 36px;
        padding: 10px;

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

    .searchbar__input {
        max-width: 200px;

        font-size: 16px;

        color: var(--col_text_panel);
        background-color: transparent;
        border: none;
    }

    .searchbar__input:focus {
        outline: none;
    }

    .compact {
        display: none;
    }

    @media only screen and (max-width: 935px) {
        .searchbar {
            margin-left: auto;
        }
        .normal {
            display: none;
        }
        .compact {
            display: flex;
        }
    }

    @media only screen and (max-width: 730px) {
        .searchbar {
            margin-left: auto;
        }
        .normal {
            display: flex;
        }
        .compact {
            display: none;
        }
    }

    @media only screen and (max-width: 506px) {
        .searchbar {
            margin-left: auto;
        }
        .normal {
            display: none;
        }
        .compact {
            display: flex;
        }
    }
</style>