@layer components {
  .chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .chip-choice {
    position: relative;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-soft);
    background-color: var(--color-surface);
    box-shadow: var(--bevel-sm);
    transition: var(--default-transition-duration) var(--default-transition-timing-function);
    transition-property: color, background-color, box-shadow;

    @media (any-hover: hover) {
      input:not(:checked) ~ &:hover {
        background-color: var(--color-surface-muted);
      }
    }

    input:checked ~ & {
      color: var(--color-blue-700);
      background-color: var(--color-blue-50);
      box-shadow: inset 0 0 0 1px var(--color-blue-600);
    }

    input:focus-visible ~ & {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .chip__icon {
    font-size: 1rem;
    color: var(--color-text-muted);

    input:checked ~ .chip & {
      color: var(--color-blue-600);
    }
  }

  .chip__note {
    font-weight: var(--font-weight-normal);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-text-muted);

    @media (max-width: 40rem) {
      display: none;
    }
  }
}