@layer components {
  /* A picker: the current value, and a menu to change it.

     One control for every decision in the product that is "pick one of these",
     wherever it is asked. It carries the mark or the face the lists carry, so
     the value is recognised before it is read, and it opens the same menu a
     task row opens — which is the point. A person picked from a list of names
     in a select and a person picked from a list of faces in a menu were two
     different acts in one product; now there is one.

     Written to sit in a form's rhythm: the same height, padding and border as
     a .property__control, so a row of pickers and plain fields reads as one
     row and not as two kinds of thing that happen to be adjacent.

     A picker is not the only way this product asks somebody to choose one of a
     set, and the difference is worth stating because the Members page shows
     both at once — a picker for each member's role, and a plain <select> for
     the role on the invitation form below it.

       A picker changes something that already exists. It answers on its own,
       the moment it is used, so it needs no submit button and belongs beside
       the value it is changing.

       A select fills in something being created. It is one field of several
       and it is answered when the form is, so it wears the same box as the
       email field next to it and waits its turn.

     Same question, two situations. The controls differ because the moments
     do. */
  .picker {
    font: inherit;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: var(--space);
    width: 100%;
    min-height: var(--control-h-sm);
    padding: 0 var(--space);
    margin-inline: calc(var(--space) * -1);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), var(--responds);
  }

  .picker:hover { background: var(--surface-hover); }

  /* No outline: none. Swapping the ring for a border colour is a weaker
     keyboard signal than the one base.css gives every other control, and the
     rule written there applies to the newest code as much as the oldest. */
  .picker:focus-visible { background: var(--surface); }

  /* A value that cannot be changed — the sole owner's role, which the product
     refuses to let anybody drop. The same control in a different state rather
     than a different control: it keeps the metrics and loses the affordances,
     so the column still lines up and nothing invites a press. */
  .picker:disabled { cursor: default; color: var(--ink-muted); }
  .picker:disabled:hover { background: none; }
  .picker:disabled .picker__chevron { visibility: hidden; }

  /* The status mark is a button of its own in a row; here it is a mark inside
     one, so it gives up the width and the height it was claiming. */
  .picker .task__status {
    width: auto;
    height: auto;
    flex: none;
  }

  .picker__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .picker__value--empty { color: var(--ink-faint); }

  /* The same square of two borders the masthead's chevron is, and it turns for
     the same reason and off the same attribute. */
  .picker__chevron {
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-enter);
  }

  [aria-expanded="true"] .picker__chevron { transform: translateY(1px) rotate(225deg); }
}