<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
	item: {
		type: Object,
		default: () => ({})
	}
})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<div class="btn">
		{{ item.name }}
	</div>
</template>
<style lang="less" scoped>
	.btn{
		font-size: 1.2rem;
		width: 5rem;
		height: 5rem;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 2px solid #000;
		color: #000;
		cursor: pointer;
		margin-bottom: 4rem;
		position: relative;
		&::after{
			content: '';
			cursor: auto;	
			position: absolute;
			top: calc(100% + 2px);
			height: 4rem;
			left: 50%;
			width: 1.8px;
			transform: translateX(-50%);
			background: 
				repeating-linear-gradient(0deg, #333 0, #333 5px, transparent 5px, transparent 10px),
				linear-gradient(white, white);
			background-clip: padding-box, border-box;
			background-origin: border-box;
		}
		&.active{
			background-color: #e6e6e6;
		}
	}
	.btn:nth-child(1){
		background-color: #7A7A7A;
		color: #FFF;
		border: 2px solid #7A7A7A;
	}
	.btn:last-child{
		margin-bottom: 0;
		&::after{
			display: none;
		}
	}
</style>