<script>import { BEM } from '../../models/BEM';
export let label = '';
export let theme = 'primary';
export let icon = '';
export let iconRight = '';
export let rounded = false;
const parent = new BEM('UI-Tag', {
    [theme]: !!theme
});
</script>

<span class={parent.toString()} class:rounded on:click>
	{#if icon}
		<span class="icon">
			<slot name="icon">
				<i class={icon} />
			</slot>
		</span>
	{/if}
	<slot>
		{label}
	</slot>
	{#if iconRight}
		<span class="iconRight">
			<slot name="iconRight">
				<i class={iconRight} />
			</slot>
		</span>
	{/if}
</span>

<style>.UI-Tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon {
  margin-right: 0.25rem;
  font-size: 0.65rem;
}

.iconRight {
  margin-left: 0.25rem;
  font-size: 0.65rem;
}

.rounded {
  border-radius: 80px;
}

.primary {
  background-color: var(--ui-primary);
  color: var(--ui-theme-primary);
}
.primary:hover {
  opacity: 0.9;
}

.secondary {
  background-color: var(--ui-secondary);
  color: var(--ui-theme-primary);
}
.secondary:hover {
  opacity: 0.9;
}

.danger {
  background-color: var(--ui-danger);
  color: var(--ui-theme-primary);
}
.danger:hover {
  opacity: 0.9;
}

.info {
  background-color: var(--ui-info);
  color: var(--ui-theme-primary);
}
.info:hover {
  opacity: 0.9;
}

.success {
  background-color: var(--ui-success);
  color: var(--ui-theme-primary);
}
.success:hover {
  opacity: 0.9;
}

.warning {
  background-color: var(--ui-warning);
  color: var(--ui-theme-primary);
}
.warning:hover {
  opacity: 0.9;
}

.default {
  background-color: var(--ui-default);
  color: var(--ui-theme-primary);
}
.default:hover {
  opacity: 0.9;
}

.dark {
  background-color: var(--ui-dark);
  color: var(--ui-theme-primary);
}
.dark:hover {
  opacity: 0.9;
}

.white {
  background-color: var(--ui-white);
  color: var(--ui-theme-primary);
}
.white:hover {
  opacity: 0.9;
}</style>
