/* People picker (shared/_people_picker.html.erb): checkbox list with a filter and chips.
   Used by the meeting form (friends) and the app form (every active member). Moved from
   meetings.css when Apps became its second page (constitution Principle VII). */

.guest-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.guest-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.guest-picker__chips:not(:empty) {
  margin-bottom: var(--space-2);
}

.guest-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 4px 2px var(--space-2);
  font-size: var(--text-sm);
  background-color: var(--color-selection);
  border-radius: var(--radius-pill);
}

.guest-picker__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-comment);
  background: transparent;
  border: 0;
  border-radius: var(--radius-circle);
  cursor: pointer;
}

.guest-picker__remove:hover {
  color: var(--color-foreground);
  background-color: var(--color-card);
}

.guest-picker__list {
  max-height: 168px;
  margin: var(--space-2) 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.guest-picker__option[hidden] {
  display: none;
}

.guest-picker__label {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "box avatar name"
    "box avatar email";
  align-items: center;
  column-gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-standard);
  cursor: pointer;
}

.guest-picker__label:hover {
  background-color: var(--color-selection);
}

.guest-picker__label input {
  grid-area: box;
  accent-color: var(--color-purple);
}

.guest-picker__label .avatar {
  grid-area: avatar;
}

.guest-picker__name {
  grid-area: name;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.guest-picker__email {
  grid-area: email;
  font-size: var(--text-sm);
  color: var(--color-comment);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}