<script lang="ts">
	import Button from '../button.svelte';
	import FaGear from '$icon/fa-gear.svelte';
	import { settings } from '$lib/stores';
</script>

<button
	type="button"
	plain
	icon
	size="lg"
	label="Settings"
	tooltipPlacement="left"
	on:click={() => settings.open.set(true)}
>
	<FaGear />
</button>

<style lang="scss">
	button {
		position: fixed;
		bottom: 6rem;
		right: 1rem;
		width: 4rem;
		height: 4rem;
		margin: 0;
		border-radius: 50%;
		box-shadow: var(--card-shadow);

		& > :global(svg) {
			width: 2rem;
		}
	}
</style>
