/* Onboarding: the choice pills of the about step and the add-on picker.
 * Everything sits on paper inside the stage window.
 * ---------------------------------------------------------------------- */

@layer modules {
  .onboarding-choices {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .onboarding-choices > legend {
    font-weight: 600;
    margin-block-end: var(--space-xxs);
    padding: 0;
  }

  .onboarding-choice {
    align-items: center;
    background-color: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    border-radius: 99rem;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
  }

  .onboarding-choice:hover {
    background-color: var(--color-hover);
  }

  .onboarding-choice:has(input:checked) {
    background-color: var(--color-sun);
  }

  .onboarding-choice input {
    accent-color: var(--color-ink);
    margin: 0;
  }

  .product-card__select {
    cursor: pointer;
    font-weight: 600;
    margin-block-start: auto;
    padding-block-start: var(--space-s);
  }

  .product-card__select input {
    accent-color: var(--color-accent);
  }
}