<script lang="ts">
	import chroma from 'chroma-js';
	
	export let label: string;
	export let color: string;
	console.log(color)
	export let remove: Function | null = null;
	let removed = false;
	
</script>

<div class:removed class="selected" style={`--item-color:${chroma(color).rgb().join(',')};`} class:removable={!!remove} {...$$restProps}>
	<div class="label">{label}</div>
	{#if !!remove}
		<button
			class="unselect"
			on:click={() => {
				removed = true;
				remove && remove();
			}}
			on:keypress={() => {}}
		>
			<svg
				height="14"
				width="14"
				viewBox="0 0 20 20"
				aria-hidden="true"
				focusable="false"
				><path
					d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
				/></svg
			>
		</button>
	{/if}
</div>

<style lang="scss">
	.unselect {
		color: rgb(var(--item-color));
		-moz-box-align: center;
		align-items: center;
		border-radius: 2px;
		display: flex;
		padding-left: 4px;
		padding-right: 4px;
		box-sizing: border-box;
		cursor: pointer;
		svg {
			fill: currentColor;
		}
		&:hover {
			background-color: currentColor;
			svg {
				fill: white;
			}
		}
	}

	.selected {
		background-color: rgba(var(--item-color), 0.1);
		border-radius: 2px;
		display: flex;
		margin: 2px;
		min-width: 0px;
		box-sizing: border-box;
		transition: 0.5s;
		//max-width: 100px;
	}

	.removed {
		max-width: 0;
	}

	.label {
		color: rgb(var(--item-color));
		border-radius: 2px;
		font-size: 85%;
		overflow: hidden;
		padding: 3px 3px 3px 6px;
		text-overflow: ellipsis;
		white-space: nowrap;
		box-sizing: border-box;
	}

	:not(.removable) > .label{
		padding: 4px 6px;
	}
</style>
