<template>
	<button
		class="py-5 px-8 md:px-15 font-fat text-4xl text-white md:text-5xl rounded<md shadow-lg text-center border-none cursor-pointer"
		:class="$style.root"
		:disabled="disabled"
	>
		<slot/>
	</button>
</template>

<style module lang="scss">
	.root {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url("../assets/noise.png") repeat;
			opacity: 20%;

			transition: 200ms ease opacity;
		}

		&::after {
      background: linear-gradient(to bottom, #1c1c1e, #0f0f0f);

			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			opacity: 0;
			transition: 500ms ease opacity;
		}

		&:disabled {
			cursor: not-allowed;

			&::after {
				opacity: 70%;
			}
		}

		&:not(:disabled):hover::before {
			opacity: 60%;
		}
	}
</style>

<script setup lang="ts">
	const props = defineProps({
		disabled: Boolean
	})
</script>