<template>
	<span class="pi-state" :class="[{'pi-status-processing':pulse}, 'pi-state-bg--'+type]"></span>
</template>

<script>
	export default {
		props: {
			type: { type: String, default: "primary" },
			pulse: { type: Boolean, default: false }
		}
	}
</script>

<style scoped>
	.pi-state {display: inline-block;background: #000;width: 8px;height: 8px;border-radius: 50%;vertical-align: middle;}
	.pi-status-processing {position: relative;}
	.pi-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}

	.pi-state-bg--primary {background: var(--el-color-primary);}
	.pi-state-bg--success {background: var(--el-color-success);}
	.pi-state-bg--warning {background: var(--el-color-warning);}
	.pi-state-bg--danger {background: var(--el-color-danger);}
	.pi-state-bg--info {background: var(--el-color-info);}

	@keyframes warn {
		0% {
			transform: scale(0.5);
			opacity: 1;
		}
		30% {
			opacity: 0.7;
		}
		100% {
			transform: scale(2.5);
			opacity: 0;
		}
	}
</style>
