@layer components {
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    min-block-size: 2rem;
    padding-block: var(--block-space-half);
  }

  .chips:empty {
    display: none;
  }

  .chip {
    align-items: center;
    background-color: var(--color-surface);
    border: var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: var(--text-small);
    gap: var(--inline-space-half);
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
  }

  .chip__label {
    font-weight: 500;
  }

  .chip__remove {
    align-items: center;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--color-ink-subtle);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-normal);
    inline-size: 1.25rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    block-size: 1.25rem;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-canvas);
        color: var(--color-ink);
      }
    }
  }
}