<script context="module" lang="ts">
	export type IconValues =
		| 'analytics'
		| 'back'
		| 'building'
		| 'calendar'
		| 'calendarView'
		| 'camera'
		| 'chart'
		| 'chat'
		| 'chat-small'
		| 'check'
		| 'check-big'
		| 'checklist'
		| 'chevron'
		| 'cloud'
		| 'company'
		| 'cross'
		| 'dots-horizontal'
		| 'dots-vertical'
		| 'edit'
		| 'eye'
		| 'eye-off'
		| 'filter-lines'
		| 'hamburger'
		| 'hash'
		| 'help'
		| 'heart-hand'
		| 'home'
		| 'listView'
		| 'lock'
		| 'logout'
		| 'map'
		| 'microphone'
		| 'notification-box'
		| 'people'
		| 'plus'
		| 'plus-circle'
		| 'profile'
		| 'publish'
		| 'qrcode'
		| 'schedule'
		| 'search'
		| 'share'
		| 'settings'
		| 'send'
		| 'social'
		| 'support'
		| 'table'
		| 'trash'
		| 'upload'
		| 'user-circle'
		| 'user-default'
		| 'user-down'
		| 'user-plus'
		| 'user-remove'
		| 'verified'
		| 'socials/Twitter'
		| 'socials/LinkedIn';
</script>

<script lang="ts">
	export var icon: IconValues;
	export var active: boolean = false;
	export var inactive: boolean = false;
	export var black: boolean = false;
	export var white: boolean = false;
	export var rotate = 0;

	let className = '';
	export { className as class };
</script>

<div
	class="icon {className}"
	class:active
	class:inactive
	style:mask="url(/images/icons/{icon}.svg) no-repeat center"
	style:-webkit-mask="url(/images/icons/{icon}.svg) no-repeat center"
	style:transform="rotate({rotate}deg)"
	class:black
	class:white
	on:click
	on:dblclick
	on:keydown
	on:keypress
	on:keyup
/>

<style>
	.icon {
		@apply w-8 h-8 bg-current origin-center rounded-[100%];
	}
	.icon.active {
		@apply bg-primary;
	}
	.icon.black {
		@apply bg-black;
	}
	.icon.inactive {
		@apply bg-gray-700;
	}
	.icon.white {
		@apply bg-white;
	}
</style>
