@layer components {
  .tool-picker {
    display: grid;
    gap: 1rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;

    & > legend {
      padding: 0;
      margin-block-end: 0.5rem;
    }
  }

  .tool-picker__group {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .tool-picker__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    inline-size: 100%;
    padding: 0;
    margin-block-end: 0.5rem;
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .tool-picker__count {
    color: var(--muted-foreground);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }

  .tool-picker__tool {
    padding-block: 0.5rem;
    border-block-start: 1px solid var(--border);
  }

  /* Hidden with its tool unticked, as it applies only to a chosen tool. */
  .tool-picker__verification {
    margin-block-start: 0.5rem;
    padding-inline-start: 1.75rem;
  }

  .tool-picker__tool:has(> .checkbox input:not(:checked)) .tool-picker__verification {
    display: none;
  }
}
