@layer components {
  /* Without JavaScript the set select shows, and a select is as wide as its
     longest option. A floor of zero lets this flex item shrink below that
     width, so the narrowest phones get no sideways scroll. */
  .set-combobox {
    position: relative;
    min-width: 0;
  }

  .set-combobox input {
    width: 18rem;
    max-width: 100%;
    font: inherit;
    line-height: normal;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
  }

  .set-combobox [role="listbox"] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    width: 100%;
    max-height: 20rem;
    overflow-y: auto;
    margin-top: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .set-combobox [role="group"] [role="presentation"] {
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-muted);
  }

  .set-combobox [role="option"] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--color-ink);
    cursor: pointer;
  }

  .set-combobox [role="option"]:hover,
  .set-combobox [role="option"][aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }
}