<script lang="ts">
  export let value = "";
  export let small = false;

  let style = "";

  $: {
    let hash = 0;
    for (let i = 0; i < value.length; i++) {
        hash = value.charCodeAt(i) + ((hash << 5) - hash);
        hash = hash & hash;
    }
    
    style = `color: hsl(${(hash << 4) % 360}, ${40 + (hash % 8)}%, ${50+(hash % 4)}%)`
  }
</script>

<div style={style} class="tag" class:small>{value}{small?":":""}</div>

<style>
  div.tag {
    padding: 0.25em 0.75ch;
    margin: 0.25em 0.5ch;
    font-size: 0.75em;
    border: 1px solid;
  }

  div.tag.small {
    font-size: 1em;
    padding: 0;
    margin: 0;
    margin-right: 0.50ch;
    border: none;
  }

  :global(div.ql-list-item:hover) div.tag.small {
    filter: brightness(150%);
  }
</style>