<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('click')}>
	<slot />
</button>

<style>
	button {
		position: relative;
		cursor: pointer;
		font-family: 'Meow Script', cursive;
		font-size: var(--font-size, 1em);
		color: #ceba51;
		background: transparent;
		border-width: 30px;
		border-image: url(/border.png);
		border-image-repeat: stretch;
		border-image-slice: 100%;
		border-image-slice: 24% 23%;
		transition: border-image-slice 0.3s ease;
		will-change: contents;
	}

	button:hover {
		border-image-slice: 24% 23%;
	}

	button::after {
		content: '';
		position: absolute;
		background: rgba(0, 0, 0, 0.7);
		box-shadow: 0 0 70px #ffb11b22;
		top: -15px;
		left: -15px;
		z-index: -1;
		width: calc(100% + 30px);
		height: calc(100% + 30px);
		transition: box-shadow 0.8s ease;
	}

	button:hover::after {
		box-shadow: 0 0 40px #ffb11b55;
	}
</style>
