/*----------- reference --------------*/

/* https://codepen.io/hansmaad/pen/QGYpey */

/*-------------------------*/

:root{
    --bs-chip-height: 32px;
    --bs-chip-color: #e0e0e0;
}
.bs-chip {
    display: inline-block;
    background: var(--bs-chip-color);
    padding: 0 12px;
    border-radius: 32px;
    font-size: 13px;
  }
  .bs-chip.bs-chip-hover:hover {
    background: #ccc;
  }
  
  .bs-chip-clickable {
    cursor: pointer;
  }
  
  .bs-chip, .bs-chip-icon {
    height: var(--bs-chip-height);
    line-height: var(--bs-chip-height);
    overflow: clip;
    & img{
      height: 100%;
      width: auto;
      aspect-ratio: 1;
      object-fit: cover;
      display: grid;
      place-items: center;
    }
  }
  
  .bs-chip-icon {
    font-size: 1.3rem;
    display: block;
    float: left;
    background: var(--chip-color,var(--firstColor));
    width: var(--bs-chip-height);
    border-radius: 50%;
    text-align: center;
    color: white;
    margin: 0 8px 0 -12px;
  }
  
  .bs-chip-remove {
    display: inline-block;
    background: #aaa;
    border: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    padding: 0;
    margin: 0 -4px 0 4px;
    cursor: pointer;
    font: inherit;
    line-height: 20px;
  }
  .bs-chip-remove:after {
    background: var(--bs-chip-color);
    content: "x";
  }
  .bs-chip-remove:hover {
    background: #999;
  }
  .bs-chip-remove:active {
    background: #777;
  }
  
  .bs-chips {
    padding: 12px 0;
  }
  .bs-chips .bs-chip {
    margin: 0 5px 3px 0;
  }
  
  .bs-chip-raised {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }