<script lang="ts">
	export let height: string|number = 50;
	export let width: string|number = "unset";
	export let handler: (e: Event) => unknown;

	// Add the units to the height value if not provided, and ensure that the
	// provided height is not less than 50 (the default)
	$: if (typeof(height) == "string") {
		if (height.match(/[0-9]$/)) {
			if (height.match(/^[0-4]?[0-9]$/)) {
				height = `50`;
			};
			height = `${height}px`;
		};
	} else {
		if (height < 50) {
			height = 50;
		};
		height = `${height}px`;
	};


	// Add the units to the width value if not provided
	$: if (typeof(width) == "string") {
		if (width.match(/[0-9]$/)) {
			width = `${width}px`;
		};
	} else {
		width = `${width}px`;
	};
</script>

<div
	style="--height: {height}; --width: {width};"
	class="button-container"
>
	<button on:click={handler}>
		<slot></slot>
	</button>
</div>

<style lang="scss">
div.button-container {
	display: inline-block;
	position: relative;
	margin: 10px;
	width: var(--width);
	height: var(--height);
}

$button-background: #0a0;

button {
	background: $button-background;
	border-radius: 5px;
	border: 3px solid $button-background;
	box-sizing: border-box;
	font-family: 'Orbitron', sans-serif;
	height: calc(100% - 20px);
	margin: 10px;
	padding: 5px 7px;
	transition: all .5s ease;
	transition: opacity .2s ease;
	width: calc(100% - 20px);

	&:active {
		opacity: .2;
		outline: none;
	}

	&:hover {
		background-color: transparent;
		border-radius: 20px;
		color: white;

		&:before {
			border-radius: min(calc(((var(--height) - 20px) / 2) + 5px), 25px);
			border: 2px $button-background solid;
		}
	}

	&:before {
		content: ' ';
		border: 2px transparent solid;
		position: absolute;
		left: 5px;
		top: 5px;
		box-sizing: border-box;
		width: calc(100% - 10px);
		height: calc(calc(100% - 20px) + 10px);
		transition: all .7s ease;
	}
}
</style>