

<script>

export default {
	props: {
		clicked: {
			type: Function,
			default () {}
		}
	}
}

</script>

<template>
	<s_button
		ref="button"
		:pressable="true"
		boundaries="0 0"
		:clicked="clicked"
		:styles="{
			outside: {
				borderRadius: '50%',
				padding: 0
			},
			
			inside: {
				border: 0,
				borderRadius: '50%',
				
				padding: '4px',
				
				display: 'flex',
				justifyContent: 'center',
				alighItems: 'center'
			}
		}"
	>
		<svg 
			xmlns="http://www.w3.org/2000/svg" 
			fill="none" viewBox="0 0 24 24" 
			stroke-width="1.5" 
			stroke="#FFF" 
			class="w-6 h-6"
			:style="{
				height: '20px',
				width: '20px'
			}"
		>
			<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
		</svg>
	</s_button>
</template>