suggestion-select {
  position: fixed;
  background: var(--color-bg);
  border: 1px solid var(--color-border-darker);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  min-width: 16rem;
}

suggestion-option {
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  padding: 0.55rem 0.85rem;
  color: var(--color-text);
}

suggestion-option:hover,
suggestion-option[selected] {
  background: var(--color-selected);
}

.suggestions__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.suggestions__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-border-darker);
  flex-shrink: 0;
}

.suggestions__initials {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border-darker);
  color: var(--color-text-reversed, #fff);
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.suggestions__name {
  font-weight: 500;
  font-size: 0.9375rem;
}

.selection-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0.35rem 0.15rem 0;
  padding: 0.2rem 0.45rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-darker);
  border-radius: 999px;
  font-size: 0.8125rem;
}

.selection-item__avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
}

.selection-item__initials {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border-darker);
  color: var(--color-text-reversed, #fff);
  font-size: 0.625rem;
  font-weight: 600;
}

.selection-item__remove {
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.15rem;
}

.selection-item__remove:hover {
  color: var(--color-text);
}

.team-picker {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.team-picker__selections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 0.25rem;
}

.team-picker__search {
  inline-size: 100%;
}

suggestion-option.flashing {
  animation: suggestions-flash 0.6s ease-in-out;
}

suggestion-option.flashing-off {
  background: var(--color-link) !important;
  color: var(--color-text-reversed) !important;
}

@keyframes suggestions-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}