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

  .chip-choice {
    position: relative;
  }

  .chip {
    cursor: pointer;
    border-radius: var(--radius-lg);
    border-width: 2px;
    border-color: var(--color-slate-200);
    background-color: var(--color-white);
    padding: 0.5rem 1.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-slate-700);
    transition: all var(--default-transition-duration) var(--default-transition-timing-function);

    @media (max-width: 40rem) {
      padding-inline: 0.875rem;
    }

    &:hover {
      border-color: var(--color-slate-300);
    }

    input:checked ~ & {
      border-color: var(--color-indigo-600);
      color: var(--color-indigo-700);
      background-color: var(--color-indigo-50);
    }

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