.person-selector {
  width: min(444px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0;
  padding: 2px;
  border: 1px solid #d7dce5;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(24, 32, 42, 0.05);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.person-selector-button {
  min-width: 0;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1f2937;
  font: inherit;
  font-weight: 750;
}

.person-selector-button.active {
  background: #ffffff;
  color: #4f27ff;
  box-shadow: 0 1px 4px rgba(24, 32, 42, 0.12);
}

.child-tab-icon {
  width: 26px;
  height: 26px;
  display: block;
  background: currentColor;
  -webkit-mask-image: url("/icons/ui/user.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("/icons/ui/user.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.person-selector-button:not(.active) .child-tab-icon {
  color: #667085;
}

.person-selector-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px;
  color: #667085;
  text-align: center;
}