/* The team member picker (/design-system#user_picker): the canonical menu's shell, no shadow, the same row everywhere. */
.ds-user-picker {
  border: 1px solid var(--ds-menu-border);
  border-radius: var(--ds-menu-radius);
  background: var(--ds-menu-bg);
  padding: var(--ds-menu-inset);
  box-sizing: border-box;
  inline-size: min(22rem, calc(100vw - 32px));
  color: var(--ds-menu-text);
}
.ds-user-picker[popover] { position: fixed; inset: auto; margin: 0; overflow: visible; }
:is(.ds-user-picker--inline, .ds-user-picker:popover-open) { display: grid; gap: var(--ds-space-2); }
.ds-user-picker .ds-user-picker__scroll { max-block-size: 20rem; overflow-y: auto; overscroll-behavior: contain; }
.ds-user-picker .ds-user-picker__list:not([aria-multiselectable="true"]) .ds-user-picker__row:not(.cs-picker-row--selected) .cs-picker-row__check { visibility: hidden; }
.ds-user-picker .ds-user-picker__empty { margin: 0; padding: var(--ds-space-2); color: var(--ds-text-muted); font-size: var(--ds-font-size-sm); text-align: center; }
.ds-user-picker .ds-user-picker__empty:empty,
.ds-user-picker .ds-user-picker__status:empty { display: none; }
.ds-user-picker .ds-user-picker__more { display: flex; align-items: center; justify-content: center; gap: var(--ds-space-2); padding: var(--ds-space-2); color: var(--ds-text-muted); font-size: var(--ds-font-size-xs); }
.ds-user-picker .ds-user-picker__status { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-font-size-xs); }
.ds-user-picker .ds-user-picker__status[data-state="failed"] { color: var(--ds-negative); }
/* With save, the checks add up and the Salvar at the foot sends them; it sits at the right, as a form's main button. */
.ds-user-picker .ds-user-picker__footer { display: flex; justify-content: flex-end; }

@media (max-width: 40rem) {
  .ds-user-picker[popover] { inline-size: calc(100vw - 32px); }
}

@media (max-width: 40rem), (pointer: coarse) {
  .ds-user-picker .ds-user-picker__row { min-block-size: 44px; }
}

/* The chosen ones on view, as chips, next to the plus that opens the search. */
.ds-user-picker-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
}

.ds-user-picker-chip { padding-inline-start: 0.1875rem; }

/* Open search: the picker is the page's field, as wide as the form, with the chips above and the start button below. */
.ds-user-picker.ds-user-picker--open { inline-size: 100%; }
.ds-user-picker-chosen--open:not(:has(.ds-chip)) { display: none; }
form:not(:has(.ds-user-picker--open [data-user-picker-target="hidden"] input)) .ds-user-picker__submit { visibility: hidden; }

/* The search the picker focuses on opening has no focus line until it is typed in, clicked or tabbed back to. */
.ds-user-picker[data-quiet-focus] .cs-search:focus-within { outline: none; }

/* Compact: the v5 menu's ruler, for a picker opened from a chip inside a popover (Criar tarefa's Para). Rows of 40 px,
   a 24 px face, the name at 14 px in medium and the e-mail at 12 px on one line, the hover a rounded row with no line. */
.ds-user-picker--compact,
.ds-user-picker--compact[popover] {
  inline-size: min(20rem, calc(100vw - 32px));

  .ds-user-picker__scroll { max-block-size: 17rem; }
  .ds-list { gap: 0; }

  .ds-list .cs-picker-row {
    min-block-size: 40px;
    gap: var(--ds-space-2);
    padding: 4px var(--ds-space-2);
    border-radius: var(--ds-menu-item-radius);
  }

  /* The face is drawn at 32 px with an inline size by the row the endpoint renders. */
  .cs-picker-row > :first-child { --avatar-size: 24px; width: 24px !important; height: 24px !important; }

  .cs-picker-row__body { gap: 0; }
  .cs-picker-row__name { font-size: 14px; font-weight: var(--ds-weight-medium); line-height: 1.3; }
  .cs-picker-row__subtitle { font-size: 12px; line-height: 1.3; }
  .cs-picker-row__check { inline-size: 18px; block-size: 18px; }

  @media (pointer: coarse) { .ds-list .cs-picker-row { min-block-size: 44px; } }
}