<script setup>
const emit = defineEmits(['toggle']);
</script>

<template>
	<div
		class="filters-toggle open"
		@click.stop="emit('toggle')"
	><Icon icon="filter" /></div>
</template>

<style scoped>
.filters-toggle {
	min-width: 2.75rem;
	height: 3rem;
	justify-content: center;
	align-items: center;
	padding: 0 .25rem;
	border-radius: 0 .5rem .5rem 0;
	background: var(--background);
	color: var(--glass);
	font-weight: bold;
	box-shadow: inset 0 0 3px var(--shadow-weak-30);

	&.open {
		left: 0;
		right: auto;
	}

	&.show-full {
		display: flex;
	}

	&.close .cross {
		display: none;
	}

	.icon {
		fill: var(--glass);
	}

	&:hover {
		cursor: pointer;

		.icon {
			fill: var(--primary);
		}
	}
}
</style>
