.chip {
    border: 0;
    color: inherit;
    line-height: 1;
    -webkit-appearance: none;
            appearance: none;
    display: inline-flex;
    align-items: center;
    border-radius: 50em;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .chip:not([class^=padding-]):not([class*=" padding-"]) {
    padding: var(--space-3xs);
  }
  
  .chip--outline {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.25);
  }
  
  .chip--primary {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
    color: var(--color-primary-darker);
  }
  
  .chip--error {
    background-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);
    color: var(--color-error-darker);
  }
  
  .chip--success {
    background-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), 0.2);
    color: var(--color-success-dark);
  }
  
  .chip--warning {
    background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), 0.2);
    color: var(--color-warning-darker);
  }
  
  .chip--interactive {
    cursor: pointer;
    transition: background, box-shadow, transform;
    transition-duration: 0.2s;
  }
  .chip--interactive:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
  }
  .chip--interactive:active {
    transform: translateY(1px);
  }
  .chip--interactive:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95);
  }
  
  .chip__label {
    padding: 0 var(--space-2xs);
  }
  
  .chip__img {
    display: block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .chip__icon-wrapper {
    display: flex;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95);
    color: var(--color-bg);
    /* icon color */
  }
  .chip__icon-wrapper .icon {
    display: block;
    margin: auto;
  }
  
  .chip__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
            appearance: none;
    display: flex;
    width: 1.5em;
    height: 1.5em;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
    border-radius: 50%;
    will-change: transform;
    transition: background, box-shadow, transform;
    transition-duration: 0.2s;
  }
  .chip__btn .icon {
    display: block;
    margin: auto;
  }
  .chip__btn:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.3);
  }
  .chip__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95);
  }
  .chip__btn:active {
    transform: translateY(1px);
  }