<script lang="ts">
	import Icon from './Icon.svelte';

	export let name: string;
	export let active = false;
	export let disabled = false;
	export let title: string | undefined = undefined;
	export let outline = false;
	export let subdued = false;
	export let small = false;
	export let plain = false;
	export let color: string | undefined = 'var(--active-color, var(--primary))';
</script>

<button
	on:click
	class:active
	class:outline
	class:subdued
	class:small
	class:plain
	{disabled}
	{title}
	style="--color: {color}"
>
	<Icon {name} />
	<div class="text">
		<slot />
	</div>
</button>

<style lang="scss">
	button {
		display: flex;
		flex-direction: column;
		align-items: center;

		border: 0;
		background: transparent;
		cursor: pointer;
		color: inherit;
		opacity: 0.66;

		&.plain {
			padding: 0;
		}

		display: flex;
		align-items: center;

		transition:
			opacity 0.2s,
			color 0.2s,
			border-color 0.2s;
	}

	button.subdued {
		opacity: 0.4;
	}

	.outline {
		border: 1px solid var(--foreground);
		border-radius: 4px;

		padding: 0.25em 1em;
		&.small {
			padding: 0.1em 0.8em;
		}
	}

	.active,
	button:hover {
		opacity: 1;
		color: var(--color);
		border-color: var(--color);
	}

	button:disabled {
		color: gray;
		pointer-events: none;
	}

	.text {
		font-size: 0.5em;
		text-align: center;
		margin-top: 0.2em;
	}
</style>
