<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="gradientButton">
		<div class="bg">
			<slot name="content">

			</slot>
		</div>
	</div>
</template>
<style lang="less" scoped>
	.gradientButton{
		position: relative;
		width: 100%;
		height: 100%;
		--gradientButtonBorderRadius: var(--borderRadius,1rem);
		--gradientButtonBorderWidth: var(--borderWidth,2px);
		> .bg{
			position: absolute;
			inset: var(--gradientButtonBorderWidth);
			display: flex;
			background-color: #fff;
			align-items: center;
			justify-content: center;
			border-radius: var(--gradientButtonBorderRadius);
			overflow: hidden;
		}
		&::before{
			content: '';
			position: absolute;
			width: calc(100% + 0.2rem);
			height: calc(100% + 0.2rem);
			top: 50%;
			left: 50%;
			border-radius: var(--gradientButtonBorderRadius);
			transform: translate(-50%, -50%);
			background: linear-gradient(125deg,
			#f1f1f1 0%,
			#000 40%,
			#000 65%,
			#fff 100%);
		}
	}
</style>