<template>
    <div class="search-engine">
        <div v-for="[key, engine] of searchEngineData" :key="key" class="search-engine--icon" :style="{
            backgroundImage: `url(${engine.icon})`,
        }" @click="setSearchEngine(key)">
        </div>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useSearchStore } from '@/stores/search';

const { setSearchEngine } = useSearchStore();
const { searchEngineData } = storeToRefs(useSearchStore());
</script>

<style scoped>
.search-engine {
    --max-height-val: 900%;

    width: var(--input-height);
    height: var(--max-height-val);

    transition: max-height 1s;

    overflow: hidden;
    max-height: var(--input-height);

    display: flex;
    flex-direction: column;
    gap: var(--element-distance);

    text-align: center;
    background: center no-repeat;
    background-size: contain;
}

.search-engine:hover {
    max-height: 9999px;
}

.search-engine--icon {
    flex-basis: var(--input-height);
    flex-grow: 0;
    flex-shrink: 0;

    position: relative;
    /*height: var(--input-height);*/
    width: 100%;
    /*margin-bottom: var(--element-distance);*/

    opacity: 0.8;
    filter: saturate(40%);

    text-align: center;
    background: center no-repeat;
    background-size: contain;
}

.search-engine--icon:first-child,
.search-engine--icon:hover {
    filter: saturate(1) !important;
    opacity: 1;
}
</style>