<script>
	export let label;
	export let id;
	export let value;
	export let min = 1;
	export let max;
	export let step = 1;
</script>

<label class="label" for={id}>{label}</label>
<input bind:value {id} type="number" {min} {max} {step} />

<style>
	.label {
		border: 2px solid #555;
		background-color: gray;
		border-radius: 8px;
		padding: 2px;
		width: fit-content;
	}

	input {
		font-size: 1.2rem;
		border-radius: 6px;
		margin-left: 0.1rem;
		margin-right: 0.1rem;
		padding-top: 2px;
		padding-bottom: 2px;
		width: fit-content;
	}
</style>
