<paper-chip label="Basic"></paper-chip>

<paper-chip label="Basic with Avatar Text">
  <span class="chip-background" slot="avatar">
    <span>T</span>
  </span>
</paper-chip>

<paper-chip label="Closable" closable></paper-chip>

<paper-chip label="Closable and image" closable>
  <img class="chip-image" slot="avatar" src="demo/avatar.png" alt="Contact Person">
</paper-chip>

<paper-chip label="Closable and icon" closable>
  <span class="chip-background" slot="avatar">
    <iron-icon icon="icons:favorite"></iron-icon>
  </span>
</paper-chip>

<paper-chip label="Custom Label Color" class="custom-label-color"></paper-chip>

<paper-chip label="Custom Background Color" class="custom-background"></paper-chip>

<paper-chip label="No hover effect" no-hover></paper-chip>

<paper-chip label="Custom Avatar Background Color" class="custom-avatar-background">
  <span class="chip-background" slot="avatar">
    <span>T</span>
  </span>
</paper-chip>

<paper-chip label="Custom Avatar Font and Icon Color" class="custom-avatar-font-color">
  <span class="chip-background" slot="avatar">
    <iron-icon icon="icons:favorite"></iron-icon>
  </span>
</paper-chip>

<style is="custom-style">
  paper-chip.custom-label-color {
    --paper-chip-label-color: #4db6ac;
  }

  paper-chip.custom-background {
    --paper-chip-background-color: #64b5f6;
  }

  paper-chip.custom-avatar-background {
    --paper-chip-avatar-background-color: #64b5f6;
  }

  paper-chip.custom-avatar-font-color {
    --paper-chip-avatar-font-color: red;
  }
</style>

<paper-chip-input label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>

<paper-chip-input label="+Add (Enter) -Delete (Backspace)">
  <paper-chip label="Default Tag" slot="input"></paper-chip>
  <paper-chip label="Default Tag Closbale" closable slot="input"></paper-chip>
</paper-chip-input>

<paper-chip-input-autocomplete id="paper-chip-input-autocomplete"  
  label="+Add (Enter) -Delete (Backspace)" 
  closable></paper-chip-input-autocomplete>